Communitygithub.com

TIKAZI/TIKAZ-Codex-Frontend-Design

Kuratierte Frontend-Workflows, die die visuelle Richtung beweisen, bevor die Implementierung skaliert wird.

Was ist TIKAZ-Codex-Frontend-Design?

Dieses Skill definiert eine Methode für art-directed Frontend-Entwicklung, die sicherstellt, dass visuelle Entscheidungen früh validiert werden, bevor sie in die Breite implementiert werden. Es klassifiziert die Oberfläche in einen von vier Typen (Überzeugen, Bedienen, Lesen oder Erleben) und vermeidet unnötige Landing-Page-Effekte bei Produkt-UI. Der Workflow umfasst ein Design-Read, drei Projekt-Dials (Varianz, Bewegung, Dichte), eine dominante Komposition und drei Anti-Ziele. Das Skill ‚frontend-design-studio‘ besitzt die Art Direction; andere Skills dürfen die genehmigte visuelle Welt nicht überschreiben. Ein Art-Direction-Proof wird aus Navigation, erstem Viewport, einem repräsentativen nachgelagerten Abschnitt sowie Desktop- und Mobile-Ansichten erstellt. Erst nach Genehmigung des Design-Proofs werden Änderungen an andere Skills wie ‚code-intelligence‘ und ‚engineering-delivery‘ weitergeleitet. Der Abschluss erfordert einen formellen Design-Vertrag, Screenshot-Nachweise für Ziel-Viewports, kritische Zustände, reduziertes Bewegungsverhalten, Build-/Testnachweise, Komponentenlizenzstatus und eine Übergabe mit verbleibenden Einschränkungen.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
npx skills add TIKAZI/TIKAZ-Codex-Frontend-Design
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Frontend-Design

Konzipiert, integriert, umstrukturiert und kontinuierlich gewartet von TIKAZ.

TIKAZ-Methode

  1. Klassifiziere die Oberfläche als Überzeugen, Bedienen, Lesen oder Erleben; wende Landing-Page-Spektakel nicht auf jedes Produkt an.
  2. Schreibe ein Design-Read, drei Projekt-Dials (Varianz, Bewegung, Dichte), eine dominante Komposition und drei Anti-Ziele.
  3. Lasse frontend-design-studio die Art Direction und Implementierung besitzen. Unterstützende Skills dürfen die genehmigte visuelle Welt nicht überschreiben.
  4. Erstelle einen Art-Direction-Proof: Navigation, erster Viewport, ein repräsentativer nachgelagerter Abschnitt, Desktop und Mobil zusammen.
  5. Leite repository-weite Änderungsauswirkungen an code-intelligence und die Produktionsausführung an engineering-delivery weiter – erst nach Genehmigung des Design-Proofs.
  6. Führe separate visuelle/Produkt- und Implementierungs-QA-Durchläufe durch.

Abschlusskriterien

Erforderlich: ein verbindlicher Design-Vertrag, Screenshot-Nachweise bei Ziel-Viewports, kritische Zustände, verhalten bei reduzierter Bewegung, Build-/Test-Nachweise, Komponenten-Lizenzstatus und eine Übergabe mit verbleibenden Einschränkungen.

Lies references/routing.md und references/output-contract.md.

Verwandte Skills

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