dec-skills

Accessibility foundations for design engineers — WCAG / POUR, semantic-HTML-first then ARIA, keyboard and focus management, inclusive design for permanent/temporary/situational constraints. Use when building or reviewing any interactive UI, adding ARIA, implementing modals/menus/forms, or auditing keyboard operability and focus order.

AI-native design engineering patterns — generative/adaptive UI, streaming as interaction, prompt-as-interface, human-in-the-loop / agentic UX, eval-driven development, designing for uncertainty, latency and cost as design constraints. Use when designing any AI/LLM-powered feature, building agentic or chat UX, handling streaming/probabilistic output, or planning for model error and cost.

Cognitive Load Theory for interfaces — intrinsic (task difficulty), extraneous (poor-design overhead), and germane (useful mental-model building) load. Use when a screen feels overwhelming, deciding what to simplify vs preserve, chunking complex flows, or diagnosing whether friction comes from the task or the design.

Foundational design-engineering principles that govern where complexity lives and how interfaces stay fast and consistent — Tesler's Law, progressive disclosure, progressive enhancement, recognition over recall, optimistic UI, perceived performance, single source of truth, constraints as a feature. Use when deciding system architecture vs UI exposure, reducing user-facing complexity, choosing what to render/reveal, or justifying a constraint-driven system.

CSS and styling architecture — scaling methodologies (BEM, ITCSS, CUBE CSS) and fluid/responsive technique (mobile-first, clamp() fluid type/space, container queries for component-level responsiveness). Use when structuring stylesheets at scale, choosing a CSS methodology, building responsive layouts, or deciding between media queries and container queries.

Design system depth beyond "tokens are data" — three-tier token architecture (primitive → semantic → component), W3C DTCG format and tooling, scales as systems, component API design, headless/unstyled primitives, documentation as product, governance and versioning. Use when architecting a design system, structuring tokens, designing component APIs, choosing headless primitives, or setting up contribution/versioning.

Product discovery and validation frameworks — Jobs To Be Done, Continuous Discovery / Opportunity Solution Tree, Lean UX / Build-Measure-Learn, Design Sprint, Working Backwards, Story Mapping, Crazy 8s. Use when scoping what to build, validating an idea before committing, structuring user research, or turning a fuzzy outcome into testable solutions.

Gestalt principles of grouping — proximity, similarity, common region, continuity, closure, figure/ground, common fate, prägnanz, uniform connectedness. The visual logic behind how the eye assembles elements into wholes. Use when laying out a screen, deciding what reads as related, designing cards/sections, or diagnosing why a layout feels disorganized.

Steve Krug's "Don't Make Me Think" laws — self-evidence as the goal, mindless clicks over fewer clicks, and ruthless word-cutting. Use when reviewing copy density, navigation clarity, or any flow that forces users to stop and think; a fast gut-check for cognitive friction.

Interface motion and animation — the 12 principles of animation applied to UI, easing and spring physics (ease-out entrances / ease-in exits), the FLIP technique for performant layout animation, and motion as feedback not decoration. Use when animating a transition, choosing easing/duration, building layout animations, or deciding whether motion is communicating or just decorating.

Jakob Nielsen's 10 usability heuristics — the bedrock checklist for evaluating any interface. Use when running a heuristic evaluation, reviewing a screen for usability problems, justifying a UX critique, or sanity-checking that status, error recovery, consistency, and undo are handled.

Don Norman's principles of interaction design — affordances & signifiers, mapping, feedback, constraints, conceptual model, and the gulfs of execution and evaluation. Use when an interface is confusing, a control's behavior isn't obvious, you're designing how an object signals what it does, or diagnosing why users can't connect intention to action.

Prioritization frameworks — RICE, Kano model, MoSCoW, Value vs Effort 2×2. Use when ranking a backlog, deciding what ships in v0 vs later, defending a sequencing decision, or classifying features as basics vs delighters.

Product metrics and outcome frameworks — North Star Framework, Google HEART, AARRR (Pirate Metrics), OKRs. Use when defining what success means, choosing which metric to optimize, instrumenting a feature, or translating a goal into measurable signals instead of shipping output blindly.

Frontend quality and testing strategy — visual regression testing (snapshot diffing) and the Testing Trophy (favor integration tests over the classic pyramid for UI). Use when deciding what kind of tests to write for UI, setting up snapshot/visual diffing, or arguing test strategy for a component or app.

Dieter Rams' 10 principles of good design — the taste-and-restraint rubric (innovative, useful, aesthetic, understandable, unobtrusive, honest, long-lasting, thorough, environmentally friendly, as little design as possible). Use when judging design quality, defending restraint over decoration, or setting a north star for a product's visual and functional character.

Frontend rendering and state architecture — CSR/SSR/SSG/ISR/streaming SSR/RSC chosen per route, state colocation and derived state, server-state vs client-state, Suspense and Error Boundaries as first-class. Use when choosing a rendering strategy, structuring component state, deciding what's server vs client, or designing loading/failure states.

Use when the user invokes /dec, says 'run design engineering skills', or starts any design-engineering task — building/reviewing UI, scoping a product, shipping decisions, performance, AI-native UX — and it's unclear which dec-* skills apply. Dispatcher that routes to the right 2-4 of the 20 dec-* canon skills instead of loading the whole family.

Core software engineering principles for the engineering half of design engineering — SOLID, DRY/KISS/YAGNI, Conway's Law, Principle of Least Astonishment. Use when structuring code, reviewing architecture, naming/shaping components, resisting over-abstraction, or explaining why a component should behave as its name implies.

The Laws of UX and cognitive heuristics beyond the common five — Doherty Threshold, Goal-Gradient, Zeigarnik, Peak-End, Serial Position, Von Restorff, Postel's Law, Parkinson's, Pareto, Occam's Razor, Flow, Banner Blindness. Use when justifying a UX decision with a named principle, designing progress/motivation, placing CTAs and nav, or setting response-time targets.

Web performance as a UX constraint — Core Web Vitals (LCP, INP, CLS) and the RAIL model with perception-keyed budgets. Use when setting performance budgets, diagnosing slow or janky pages, deciding what to optimize, or tying performance work to human-perception thresholds.