Communitygithub.com

TIKAZI/TIKAZ-Codex-Frontend-Design

Fluxos de trabalho de frontend com direção de arte que comprovam a direção visual antes de escalar a implementação.

O que é TIKAZ-Codex-Frontend-Design?

Esta habilidade implementa uma metodologia de design frontend profissional, chamada TIKAZ, que prioriza a direção de arte antes da implementação em escala. Ela começa classificando a superfície da interface em quatro categorias (Persuadir, Operar, Ler ou Experienciar) para evitar a aplicação de espetáculo de landing page em todos os produtos. Em seguida, orienta a criação de um 'Design Read', três dials de projeto (variância, movimento, densidade), uma composição dominante e três anti-objetivos. A habilidade utiliza um estúdio de design frontend dedicado para cuidar da direção de arte e implementação, construindo uma prova de direção de arte que inclui navegação, primeira viewport, uma seção representativa downstream e versões desktop e mobile. Por fim, estabelece um portão de conclusão que exige um contrato de design comprometido, evidências de captura de tela nos viewports alvo, estados críticos, comportamento de movimento reduzido, evidências de build/teste, status de licenciamento de componentes e uma entrega com limitações remanescentes. A habilidade roteia o impacto de mudanças em todo o repositório para habilidades de inteligência de código e execução de produção para engenharia de entrega.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add TIKAZI/TIKAZ-Codex-Frontend-Design
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Design Frontend

Projetado, integrado, refatorado e continuamente mantido por TIKAZ.

Método TIKAZ

  1. Classifique a superfície como Persuadir, Operar, Ler ou Experienciar; não aplique espetáculo de landing page a todos os produtos.
  2. Escreva um Design Read, três dials de projeto (variância, movimento, densidade), uma composição dominante e três anti-objetivos.
  3. Deixe que frontend-design-studio assuma a direção de arte e implementação. Habilidades de suporte não podem sobrescrever o mundo visual aprovado.
  4. Construa uma prova de direção de arte: navegação, primeira viewport, uma seção representativa downstream, desktop e mobile juntos.
  5. Roteie o impacto de mudanças em todo o repositório para code-intelligence e a execução de produção para engineering-delivery somente após a prova de design ser aprovada.
  6. Execute verificações de qualidade separadas para visual/produto e implementação.

Portão de conclusão

Exija um contrato de design comprometido, evidência de captura de tela nos viewports alvo, estados críticos, comportamento de movimento reduzido, evidência de build/teste, status de licenciamento de componentes e uma entrega com limitações remanescentes.

Leia references/routing.md e references/output-contract.md.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community