AI Skill Report Card
Redesigning Components
Rebuild the component from scratch visually — discard the old layout entirely and produce a cohesive, novel admin-panel-style design using only the project's existing theme tokens.
Quick Start14 / 15
- Read
src/themesto find available color tokens, spacing scale, and radii — these are the ONLY colors/tokens allowed. - Pick ONE admin panel design archetype (see list below) at random, and commit to it for every file touched in this change set.
- Rebuild the component markup/layout from zero: new structure, new spacing rhythm, new visual hierarchy.
- Apply compact flat glassmorphism: translucent panels, backdrop-blur, 1px hairline borders, zero box-shadows.
- Swap all icons to
lucide-react(or the project's Lucide package), solid single-color fills/strokes only. - Apply fonts:
JetBrains Monofor labels/numeric/code-like text,Outfitfor headings/body. - Verify nothing from the old layout survived — no reused class names, no leftover shadow utilities, no gradient fills.
Recommendation▾
Add a third example showing a failure case (e.g., violating the no-shadow rule) to illustrate contrast between good and bad outcomes more explicitly
Workflow14 / 15
Progress:
- Step 1: Inventory theme — list all color variables, spacing units, border-radius tokens from
src/themes - Step 2: Choose a design archetype (see Archetypes list) and note it as the session's committed style
- Step 3: Sketch new component structure (sections, grouping, hierarchy) — ignore old DOM entirely
- Step 4: Build layout with compact flat glassmorphic rules (below)
- Step 5: Replace all icons with Lucide, solid colors, consistent stroke-width
- Step 6: Apply JetBrains Mono + Outfit font pairing
- Step 7: Cross-check every modified/created file in the session matches the same archetype, spacing scale, and color usage
- Step 8: Diff against original — confirm zero shadows, zero gradients, zero skill/library usage outside
src/themes
Archetypes (pick one per session, stay consistent)
- Command Deck — dense data-grid dashboard, mono numerics, sharp dividers
- Sidebar Console — persistent left rail nav, card-based content area
- Tab Workspace — top tab bar switching flat panel views
- Split Inspector — list/master on left, detail glass panel on right
- Floating Toolbar Canvas — minimal canvas with floating compact glass toolbars/palettes
Recommendation▾
Include a concrete code snippet (CSS/Tailwind) template for the glassmorphic surface styling to reduce ambiguity
Design Rules (non-negotiable)
- No shadows — ever. Depth comes from blur + border + subtle opacity layering only.
- Glassmorphic surfaces:
background: rgba(theme-color, 0.5–0.7),backdrop-filter: blur(12–20px),border: 1px solid rgba(theme-color, 0.12–0.2). - Compact spacing: tighter paddings than typical (e.g. 8/12/16px scale, not 16/24/32px). Density over whitespace.
- Solid colors only for accents, icons, buttons, badges — no gradients.
- Flat: no skeuomorphism, no inner glows, no elevation layering beyond blur+border.
- Icons: Lucide only, consistent
stroke-width(1.5–2), solid single-tone fill where filled icons are needed. - Typography:
Outfitfor headings/UI copy,JetBrains Monofor metrics, timestamps, IDs, code, badges/tags. - Colors: pull exclusively from
src/themestokens — no hardcoded hex outside that source.
Examples16 / 20
Example 1:
Input: A basic UserCard.tsx with shadowed white card, default system font, Feather-style icons.
Output: Rebuilt as a "Split Inspector" style glass card — backdrop-blur-xl, bg-[--surface]/60, hairline border, Lucide User, Mail, Shield icons in solid theme accent color, Outfit for name/title, JetBrains Mono for user ID/joined-date, 12px compact padding, zero shadow classes.
Example 2:
Input: Settings page using default Material-ish shadowed panels and gradient buttons.
Output: Rebuilt as "Tab Workspace" — flat top tab bar with underline-on-active (solid theme color, no shadow), content panels as glass surfaces, buttons solid-filled (no gradient) with Lucide icons (Save, Trash2, ChevronRight), mono font for toggle values/version numbers.
Recommendation▾
Clarify what happens if src/themes lacks certain tokens needed (e.g., blur values) — provide a fallback guideline
Best Practices
- Commit to the archetype decision early and write it down (e.g., as a comment or in a design note) so every subsequent file in the session matches.
- Re-derive layout from the component's actual data/function — don't just reskin the old DOM tree.
- Keep interactive states (hover/active/focus) flat too: opacity or border-color shifts, never shadow-based elevation.
- Use theme token names/variables directly; never invent new hex values.
- Favor information density — this is an admin-panel aesthetic, not a marketing page.
Common Pitfalls
- ❌ Reusing old class names or component structure "for convenience" — defeats the "100% new" requirement.
- ❌ Adding
box-shadow,drop-shadow, or elevation utility classes "just for depth." - ❌ Mixing gradient fills into buttons/badges/backgrounds.
- ❌ Switching archetypes mid-session across different files in the same change set.
- ❌ Pulling colors from outside
src/themes(arbitrary hex/rgb values). - ❌ Using non-Lucide icon packs or mixing icon sets.
- ❌ Forgetting the mono/heading font pairing and falling back to a single default font.