// Code-generation skill for designing and implementing distinctive frontend interfaces in this repo. Use only when shipping UI code changes, layout changes, design tokens, or interactive tool interfaces.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | frontend-design |
| description | Code-generation skill for designing and implementing distinctive frontend interfaces in this repo. Use only when shipping UI code changes, layout changes, design tokens, or interactive tool interfaces. |
| metadata | {"family":"design","owner":"design + engineering","last_reviewed":"2026-04-30T00:00:00.000Z","version":"1.0.0"} |
This is a code-generation skill. Use it only when the result is a frontend repo diff.
Design and implement distinctive, production-grade frontend interfaces for the Indeed Flex Career Hub. Every design decision serves two masters: visual quality and content usefulness. Beautiful pages that don't help workers find information are failures. Useful pages that look generic are missed opportunities.
Use this skill with current repo context, not old audit snapshots. Current Career Hub shared UI lives under nextjs-app/src/features/career-hub/shared, and Tailwind v4 tokens live in CSS under nextjs-app/src/app/css.
page-cro identifies visual or UX issuesThe Career Hub is an information resource. Design serves content.
~60%+ of Career Hub traffic is mobile (hourly workers, students, parents checking on phones).
focus-visible:ring-* on all interactive elementsaria-* attributes, sr-only labels where neededUnlike a marketing site that benefits from surprising layouts, a content hub benefits from predictable patterns. Workers should immediately know where to find pay data, CTAs, and FAQs.
Map all brand colors to Tailwind config tokens. Never use hardcoded hex/rgb values in components.
| Token | Value | Usage |
|---|---|---|
flex-pink | #dd01aa / hsl(313, 100%, 43%) | Primary brand accent, CTA buttons, active states |
flex-pink-hover | #b5048b / hsl(313, 96%, 36%) | Button hover states |
flex-blue | Define from existing usage | Secondary accent, links |
flex-dark | Define from Header.tsx rgb values | Header, footer backgrounds |
flex-gray-* | Scale from existing usage | Borders, disabled states, subtle backgrounds |
flex-success | Green variant | Positive indicators (pay above average, completed steps) |
flex-warning | Amber variant | Caution indicators (data may be outdated) |
Implementation: Add Tailwind v4 theme tokens in nextjs-app/src/app/css/theme.css or the appropriate imported CSS token file. Replace hardcoded rgb(), rgba(), and #hex values in components with semantic tokens.
| Element | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| H1 | text-3xl / text-4xl (desktop) | font-bold | leading-tight | Page titles — one per page |
| H2 | text-2xl / text-3xl (desktop) | font-semibold | leading-snug | Section headings |
| H3 | text-xl / text-2xl (desktop) | font-semibold | leading-snug | Subsection headings |
| Body | text-base (16px) | font-normal | leading-relaxed | Article text, descriptions |
| Small | text-sm | font-normal | leading-normal | Captions, metadata, citations |
| Data | text-lg / text-xl | font-bold | leading-tight | Pay rates, statistics, key figures |
Font choice: Use the system font stack or a single high-quality web font. Avoid loading multiple font families — each adds ~20-50KB to bundle size.
Use Tailwind's default spacing scale consistently:
| Context | Spacing |
|---|---|
| Between sections (H2 blocks) | space-y-12 or mt-12 |
| Between paragraphs | space-y-4 |
| Card padding | p-4 (mobile) / p-6 (desktop) |
| Grid gap | gap-4 (mobile) / gap-6 (desktop) |
| Page padding | px-4 (mobile) / px-6 (tablet) / px-8 (desktop) |
Pay Range Hero The most important design element on role and city-role pages. Must be immediately visible, scannable, and trustworthy.
┌────────────────────────────────────┐
│ Bartender Pay in Philadelphia │ <- H1
│ │
│ $15 ─────●───────── $25/hr │ <- Visual range with marker at median
│ $19.50 median │
│ │
│ 📊 BLS OEWS May 2025 │ <- Trust signal (DataSourceCitation)
│ 📅 Last updated: March 2026 │ <- Freshness signal
│ │
│ [Find Bartender Shifts] │ <- Primary CTA
└────────────────────────────────────┘
Salary Comparison Table
Design for mobile-first: max 4 columns, use sticky first column for labels.
┌──────────┬──────────┬──────────┬──────────┐
│ Role │ Entry │ Mid │ Senior │
├──────────┼──────────┼──────────┼──────────┤
│ Bartender│ $15/hr │ $19.50 │ $25/hr │
│ Server │ $12/hr │ $16.00 │ $22/hr │
│ Barback │ $13/hr │ $15.50 │ $19/hr │
└──────────┴──────────┴──────────┴──────────┘
Tool/Calculator Input
┌────────────────────────────────────┐
│ 💰 Pay Calculator │
│ │
│ Your Role [Dropdown ▾] │
│ Your State [Dropdown ▾] │
│ Hours per Week [ 40 ] │
│ │
│ [Calculate Your Pay] │
│ │
│ Step 1 of 2 ████████░░ │ <- Progress bar
└────────────────────────────────────┘
Header/Mega Menu Current Header.tsx has 53 inline styles. Redesign with Tailwind:
Breadcrumbs
Quiz/Assessment Interface (Cocktail Quiz, Safety First, Menu Master)
┌────────────────────────────────────┐
│ Question 3 of 10 │
│ ████████████░░░░░░░ 30% │
│ │
│ What temperature should chicken │
│ be cooked to for food safety? │
│ │
│ ┌────────────────────────────┐ │
│ │ A) 145°F │ │
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │
│ │ B) 165°F ✓ │ │ <- Selected state
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │
│ │ C) 180°F │ │
│ └────────────────────────────┘ │
│ │
│ [Next Question →] │
└────────────────────────────────────┘
Use CSS transitions and Tailwind's built-in animation utilities. No heavy animation libraries (no Framer Motion, no GSAP) — keep the bundle lean.
| Interaction | Animation | Tailwind |
|---|---|---|
| Button hover | Scale + color shift | hover:scale-105 transition-transform duration-150 |
| Card hover | Subtle lift | hover:-translate-y-1 hover:shadow-lg transition-all duration-200 |
| Accordion open | Height expand | transition-[max-height] duration-300 ease-out |
| Page load | Fade in | animate-fadeIn (custom keyframe: opacity 0→1, 300ms) |
| Tab switch | Fade crossfade | transition-opacity duration-200 |
| Progress bar fill | Width animation | transition-[width] duration-500 ease-out |
| Calculator result | Number count-up | CSS counter animation or lightweight JS |
ease-out for enters, ease-in for exits, ease-in-out for continuousprefers-reduced-motion: Wrap animations in motion-safe: Tailwind prefixUse Tailwind's default breakpoints consistently:
| Breakpoint | Width | Target |
|---|---|---|
| Default (no prefix) | 0-639px | Mobile phones |
sm: | 640px+ | Large phones / small tablets |
md: | 768px+ | Tablets |
lg: | 1024px+ | Laptops |
xl: | 1280px+ | Desktops |
These are specific to recurring Career Hub UI risks:
| Anti-Pattern | Why It's Bad | What to Do Instead |
|---|---|---|
Inline styles (style={{ color: 'rgb(...)' }}) | Hard to reuse, theme, and audit | Use Tailwind classes with design tokens |
Hardcoded colors (#fff, rgb(221, 0, 169)) | Not themeable, inconsistent | Use semantic tokens from nextjs-app/src/app/css/theme.css |
!important in CSS | Specificity wars and brittle overrides | Refactor with proper Tailwind specificity |
| Tables with 5+ columns on mobile | Causes horizontal scroll or overflow | Max 4 columns, use card layout or sticky first column |
| Generic fonts (Inter, Roboto, Arial) | Undistinctive, AI-slop aesthetic | Choose a distinctive, readable font or use system stack |
| Decoration without purpose | Wastes screen space on mobile | Every visual element must improve comprehension or engagement |
| Heavy animation libraries | Bundle bloat (Framer Motion ~30KB, GSAP ~50KB) | CSS transitions + Tailwind animation utilities |
| Dense paragraphs without breaks | Mobile readers abandon long text blocks | Max 150 words before heading/list/table (matches content-writer Rule 4) |
Run this checklist when reviewing any page design:
This is a non-negotiable gate. Every code change that touches a public route, tool, or component must pass these checks before being marked done. Run pnpm audit:responsive against the local dev server (pnpm dev) for an automated pass; fix every CRITICAL finding. For non-trivial UI work, also do a manual review at 375px width in DevTools.
pnpm audit:responsive passes with zero CRITICAL issues for the routes touchedResponsiveTable (or another overflow-x-auto container) when widerflex justify-between with long inner copy and a non-wrapping action; stack on mobile via flex flex-col sm:flex-row)grid-cols-1 sm:grid-cols-2, etc.)| Anti-Pattern | Symptom | Fix |
|---|---|---|
flex items-start justify-between with long text + non-wrapping <Button> | Button overlaps text or pushes off-screen on mobile | Stack with flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between; consider w-full sm:w-auto on the button; collapse long button labels via responsive <span> |
| Long button text containing dynamic data (state name, role name, etc.) | Button overflows on small viewport | Use whitespace-normal h-auto py-2 and wrap text; or shorten label on mobile (<span className="sm:hidden">Apply</span><span className="hidden sm:inline">Apply for Benefits in {state}</span>) |
Raw <table> without overflow-x-auto wrapper | Page scrolls horizontally on mobile | Use ResponsiveTable from @/components/common/layout/ResponsiveTable |
flex gap-4 mt-3 for chip/metadata rows | Wraps badly when single chip is long | Use flex flex-wrap gap-x-4 gap-y-1 |
Fixed-width grid items (grid-cols-3) | Cards overflow on 375px | Use grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 |
Icon + label inside <Button> without shrink-0 icon | Icon shrinks before text | Add shrink-0 to the icon |
Title + Badge in same flex row using flex items-center justify-between | Badge wraps under title or pushes title to truncate | Move badge into description row on mobile via <Badge className="sm:hidden"> and a desktop-only badge in the right slot |
prefers-reduced-motion respectednext/image with proper sizingnext/dynamic)When designing or reviewing a page:
## Design Review: [Page Type / URL]
### Visual Hierarchy Assessment
- Hero: [clear / cluttered / missing key data]
- Data prominence: [good / needs elevation]
- CTA visibility: [above fold / buried]
### Mobile Audit (375px)
- Layout: [passes / issues found]
- Touch targets: [all 44px+ / issues at: ...]
- Content truncation: [none / found at: ...]
### Design Token Compliance
- Hardcoded colors found: [count, locations]
- Inline styles found: [count, locations]
### Recommendations
1. [Specific change with mockup description]
2. [Component to refactor]
3. [New pattern to introduce]
| Resource | Path |
|---|---|
| Current design system | nextjs-app/src/app/css/theme.css and imported CSS files |
| Tailwind entrypoint | nextjs-app/src/app/globals.css |
| shadcn/ui components | nextjs-app/src/components/ui/ |
| Career Hub header | nextjs-app/src/features/career-hub/shared/Header.tsx and nextjs-app/src/features/career-hub/shared/header/* |
| Brand colors | nextjs-app/src/app/globals.css |
| CRO checks (conversion design) | .agents/skills/marketing/page-cro/SKILL.md |
| Psychology (interaction design) | .agents/skills/marketing/marketing-psychology/SKILL.md |
| Skill | Relationship |
|---|---|
page-cro | CRO identifies what to fix; this skill designs how to fix it |
marketing-psychology | Psychology informs interaction design choices |
content-review | UX Quality dimension (Step 2, #6) checks scannability and mobile issues |
site-architecture | Navigation design, breadcrumbs, page hierarchy |