codex-skills-library: Skill for Claude Code

Premium Frontend UI Design v3

Goal

Create modern, compact, brand-specific interfaces that feel intentionally designed instead of generated from common AI landing-page patterns.

When to use

Use for new pages, redesigns, component sections, landing pages, multipage websites, ecommerce/product pages, dashboards, onboarding, Studio/editor screens, and frontend polish work.

Workflow

1. Inspect the existing stack, styling system, design tokens, components, and responsive patterns before editing.
2. Write a short Design Read: page type, audience, brand mood, visual language, density, and motion level.
3. Set design dials: DESIGN_VARIANCE, VISUAL_DENSITY, MOTION_INTENSITY, and explain the choice briefly.
4. Remove generic AI patterns: giant centered hero text, excessive vertical whitespace, repeated 3-card grids, random purple gradients, and identical cards.
5. Build visual hierarchy with compact sections, strong alignment, varied rhythm, useful content density, and brand-specific motifs.
6. Prefer reusable React/Next.js/TypeScript components and existing project conventions over one-off markup.
7. Use GSAP, ScrollTrigger, or advanced motion only when it supports the story or interaction and the project already supports it or the user approved adding it.
8. Check mobile, tablet, and desktop layouts before finalizing.

Quality bar

• Run typecheck, lint, tests, build, or the closest available validation command.
• Manually inspect at mobile, tablet, and desktop widths when possible.
• Confirm loading, empty, error, and success states when the page includes data or actions.

Validation

• Headings are proportional to the layout and not oversized by default.
• Sections are compact but readable; spacing is intentional, not template-like.
• Mobile is not automatically one column when two-column density is better.
• Cards, backgrounds, image masks, typography, and hover states have distinct brand personality.
• UI does not look like a generic AI SaaS template.