← ClaudeAtlas

showdar-designlisted

Use when product UI needs design direction, UX decisions, responsive layout, accessibility, or visual polish.
caongocquy/showdar-skills · ★ 2 · Web & Frontend · score 75
Install: claude install-skill caongocquy/showdar-skills
# Showdar Design ## Purpose - Produce product-specific UI direction instead of generic component-library output. - Translate product goals into hierarchy, layout, typography, color, interaction, motion, and component behavior. - Adapt design implementation to React, Next.js, React Native, Flutter, SwiftUI, or Compose. - Review and polish existing UI with accessibility and performance constraints. - Use local structured knowledge via `scripts/search.mjs` rather than loading all design data into context. - Read `references/anti-ai-ui.md` to avoid template-like AI aesthetics. ## When to use - Designing a new screen, page, flow, component system, dashboard, invitation, landing page, or mobile experience. - Turning a screenshot/reference into a coherent design direction and implementation rules. - Reviewing existing UI for hierarchy, spacing, responsiveness, interaction, accessibility, or visual polish. - Implementing design in a supported stack where platform conventions matter. - Choosing a palette, typography direction, motion language, or component behavior from product context. ## When not to use - Pure backend/algorithm work with no user interface. - Pixel-exact reproduction where the user supplied a complete authoritative design system and no design decisions remain. - Brand/legal accessibility certification; this skill provides engineering guidance, not formal compliance certification. - Do not redesign unrelated screens while implementing one bounded UI task. ## In