Truongnat Skills Design System Pro

Design system (professional)

Use platform Human Interface Guidelines and Material Design (or your chosen baseline) as references for native-feeling patterns; this skill encodes token-driven consistency, accessible baselines, and product-level visual discipline — not a replacement for brand designers or user research. Confirm brand constraints, platforms (web, iOS/Android, desktop), and primary use case (marketing site vs data-heavy app).

Related skills (this repo)

Boundary: design-system-pro = what should look and behave like at the UX/UI layer; framework skills = how to code it.

When to use

• Defining or evolving a design system (tokens, primitives, documentation).
• Setting baseline: type scale, spacing, color roles, WCAG targets, data density.
• Web vs app vs desktop — adapting patterns without cloning the wrong platform.
• Themes (light/dark), visual direction, and trend evaluation (fit vs fad).
• Consistency audits, handoff rules, governance anti-patterns.
• Trigger keywords: design tokens, WCAG, dashboard, theme, Figma, UI kit, consistency, …

Workflow

1. Confirm brand/platform scope, data density (marketing vs analytics), and which implementation skill applies.
2. Apply the principles and topic summaries below; open references/ when you need depth; defer framework code to react-pro / nextjs-pro / … when the task is implementation-only.
3. Respond using Suggested response format; note accessibility residual risk and consistency maintenance cost.

Operating principles

1. Tokens before pixels — Name and reuse; exceptions are documented.
2. Accessibility is not optional — Baseline AA contrast and keyboard/focus as default product quality.
3. Data honesty — Charts and metrics readable; no decorative distortion of scales.
4. One product voice — Components and microcopy follow the same guidelines.
5. Trends serve users — Adopt visual fashion only when it does not harm clarity or a11y.
6. Platform-appropriate — Respect mouse vs touch vs window conventions per surface.

Foundations, baseline, and data UI (summary)

• Typography, spacing, color roles, elevation; WCAG baseline; tables and dashboards — alignment, density, chart honesty.

Details: references/foundations-baseline-and-data-ui.md

Accessibility, responsive web, and font loading (summary)

• WCAG AA contrast targets; prefers-reduced-motion; breakpoint discipline and a minimal @media pattern; font-display: swap and fallbacks — web responsive layer (not native mobile — see mobile-design-pro).

Details: references/a11y-responsive-and-web-typography.md

Web performance basics (summary)

• Layout thrash avoidance, will-change discipline, lazy images, CLS awareness — not a full Core Web Vitals audit (pair with seo-pro for CWV in search context).

Details: references/web-performance-basics.md

Design system guidelines and consistency (summary)

• Tokens, primitives, documentation, governance, design ↔ code naming; fighting inconsistency.

Details: references/design-system-guidelines-and-consistency.md

Platforms: web, app, desktop (summary)

• Responsive web, native mobile patterns, desktop shells; cross-platform product strategy.

Details: references/platforms-web-app-desktop.md

Trends, themes, and visual language (summary)

• Dark/light overview, brand beyond primary color, motion purpose; trends table with judgment-first caveats.

Details: references/trends-themes-and-visual-language.md

Dark mode & semantic theming (deep dive) (summary)

• Primitive → semantic → component token layers; dark surfaces (not inverted light); borders/elevation on dark; WCAG on real pairs; system vs user theme; OLED vs gray-black; Figma variable modes.

Details: references/dark-mode-and-semantic-theming-deep-dive.md

AI & copilot UI (deep dive) (summary)

• Side dock / inline / modal layouts; streaming without layout thrash; citations and trust; tool-use states; input (Enter vs newline), context chips; a11y live regions; stop/regenerate/feedback patterns.

Details: references/ai-copilot-ui-patterns-deep-dive.md

Tips and tricks (summary)

• Handoff, loading/empty states, one primary action, UI critique habits.

Details: references/tips-and-tricks.md

Edge cases (summary)

• i18n/RTL, color-only status, custom controls, theme image assets, third-party embeds.

Details: references/edge-cases.md

Decision flow and anti-patterns (summary)

• Marketing vs data density; dark semantic surfaces; token vs one-off; web-on-native mistakes.

Details: references/decision-tree.md · references/anti-patterns.md

Cross-skill handoffs (summary)

• mobile-design-pro, react-pro / nextjs-pro, RN/Flutter, desktop, testing-pro, seo-pro, ai-integration-pro.

Details: references/integration-map.md

Versions (summary)

• WCAG edition, HIG/Material year, browser baseline, Figma variables API.

Details: references/versions.md

Suggested response format (implement / review)

1. Issue or goal — Screen type, platform, or system-level decision (token, pattern, theme).
2. Recommendation — Guideline + rationale; cite Related skill for code work.
3. Code — Token naming sketch, checklist, or layout rules — not a full component library implementation unless paired with react-pro.
4. Residual risks — a11y gaps, inconsistency debt, trend aging, engineering cost of tokens.

Resources in this skill

• references/ — foundations, system guidelines, platforms, trends, two hot-topic deep dives (dark semantic theme, AI/copilot UI), tips, edge cases.

Quick examples

Input (simple): Dashboard uses seven different grays and three border radii on one page.
Expected output: Propose token set for border, surface, radius; migration path; single density preset; defer CSS variable implementation to nextjs-pro / react-pro.

Input (tricky): Shipping dark mode — body text looks fine in Figma but fails contrast on real surfaces.
Expected output: Walk semantic mapping per theme; border/elevation on dark; verify pairs on raised surfaces; cite references/dark-mode-and-semantic-theming-deep-dive.md.

Input (cross-skill): “Copilot panel in Next.js app — layout and trust UI.”
Expected output: This skill for streaming, citations, tool states, live regions (references/ai-copilot-ui-patterns-deep-dive.md); nextjs-pro / ai-integration-pro for data fetching and SSE; testing-pro for a11y + visual regression.

Checklist before calling the skill done

• Baseline (type, space, color roles) and a11y targets stated for the context.
• Platform (web / native / desktop) appropriate patterns — not one-size-fits-all.
• Data presentation rules (alignment, units, empty states) when relevant.
• Consistency mechanism (tokens, governance) — not only one-off screens.
• Pure implementation work pointed to the right framework skill when applicable.
• For dark theme or AI assistant UI: opened the matching deep-dive reference when detail is needed.
• Motion (prefers-reduced-motion) and focus visibility considered for interactive patterns.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.