openai-frontend-design
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.
npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill acts as a senior frontend designer-then-engineer to create polished frontend apps, dashboards, games, and visually driven UI. It emphasizes generating high-quality image-generated concept designs first, with section-specific references, before implementing a faithful production-ready frontend that matches the accepted design spec. It targets new front-end surfaces from scratch or redesigns/restyling requests, ensuring an agreed concept is produced and then implemented with fidelity.
How it works
- Start from an image-gen concept to establish a visual design direction for the requested surface (full page, app, dashboard, etc.).
- Propose a complete surface design, not just a hero, for multi-section experiences; plan section-by-section concepts when dealing with multi-section pages.
- In Plan mode, generate the design first, then use request_user_input to obtain design approval before planning implementation details.
- After acceptance, treat the concept as the production design spec and implement faithfully without reinterpretation unless approval or blockers require changes.
- Build a small design system from the accepted image (tokens, typography, components, spacing, icons) before coding, so elements stay consistent.
- Default to React + Vite for new complex app UIs unless otherwise specified or dictated by the repo/task.
- Verify visuals in the Browser plugin and use Playwright Chromium only if needed, with a stated fallback reason.
- Require view_image comparisons between the accepted concept and latest browser screenshot before handoff; iteratively fix if mismatch.
When to use it
Use when creating new frontend applications, dashboards, games, creative websites, hero sections, or visually driven UI, or when the user asks for a redesign/restyle/modernization. Trigger planning to generate a full, coordinated design before implementation and require design-approval before coding.
What it can touch
The skill specifies using a design system and implementation inventory before coding, including tokens, typography, component families, variants, spacing, icon treatment, and container rules. It advocates React + Vite as the default framework for complex apps unless directed otherwise. It also requires integration with the image generation workflow and verification steps (view_image comparisons).
Caveats
It enforces strict fidelity to the accepted design spec during implementation and requires completion fidelity checks (agency-signoff level). It discourages hero-only concepts for multi-section surfaces and requires a complete surface concept before coding. It relies on Image Gen for visual concepts and browser verification before final handoff. License and tool usage notes are embedded in policy but not re-stated here beyond framework defaults and verification steps.
# Frontend App Builder Use this skill to create polished frontend apps, dashboards, games, creative websites, hero sections, redesigns, and other visually driven UI. Act first as a senior front-end designer, then as an engineer implementing an approved design spec. ## Core Standard The two priorities of this skill outrank everything else: 1. Create enough great-looking Image Gen design first: clean, airy, distinctive, complete, readable, section-specific when needed, and not repetitive by default. 2. Do not stop until the accepted design and browser implementation match 10/10. Keep fixing visual, interaction, responsive, asset, and typography mismatches until `view_image` comparison would pass agency sign-off. ## Hard Rules 1. Use Image Gen for the visual concept unless the user explicitly opts out or the task is a small UI fix inside an existing design system. 2. Design the complete requested surface before coding. For a full page, app, dashboard, game, or product interface, a header or hero concept is not enough. For multi-section websites and long landing pages, prefer coordinated section-by-section concepts, plus an optional overview for rhythm, over one tall image that loses d
- Core Standard
- Hard Rules
- Coordinate With Other Installed Skills
- Image Gen Workflow
- Design Quality Bar
- Visual Direction Defaults
- Concept Review Mode
- Before Coding
- Implementation
- Verification
- Surface Gates
- Final Response
What does the openai-frontend-design skill do?
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.
How do I install it?
Run `npx skills add fcakyon/claude-codex-settings --skill openai-frontend-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From fcakyon/claude-codex-settings, a repository with 967 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.