Thientan Soparat publishes skills that guide an AI agent through design-system and interface work, from generating brand token systems with light and dark themes to scaffolding project layouts and auditing UI against WCAG 2.2. Their most popular skills also cover data-heavy dashboards and trading terminals built from charts such as candlestick, heatmap and order book, along with UI copy and error messages, design QA gates, and governance of how a design system evolves.
Ux Ui Agent Skills
26 skills · 3,116 stars · MIT
A11Y Audit Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced fi…
Apply Aesthetic Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS…
Brandkit Generate a complete, accessible brand design system from a brief — primitive → semantic → compone…
Critique Adversarial design critique of the current work — render it, look at it, and argue for rejection.
Data Dashboard Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts…
Design Code Generate production-ready, accessible, token-driven component code for ANY framework — React+Tail…
Design Component Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, tok…
Design Doctrine The house rules for ANY design or UI work - the verification protocol (run the gate, never claim…
Design Qa Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, vis…
Design Review Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prior…
Design Screen Design or build a page, screen, landing page, website, app or UI from a request - the whole job,…
Design Tokens Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive →…
Figma Integration Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes)…
Gate Run the one-command quality gate and report the real N/N result.
Governance Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, d…
Grill Me Interrogate the brief before a line is built — ask only the questions whose answers change the wo…
Image To Code Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the desi…
Leaky A skill written the way the whole surface was written before 2026-10-05.
Migrate Design System Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent…
Performance Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strateg…
Prototype Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a…
Redesign Upgrade an existing website or app to premium quality without breaking functionality — audit the…
Scaffold Project Scaffold a new design-product project that matches the recommended Claude Code layout (the refere…
Ship Pre-release gate — run the full gate, responsive + render checks, then produce the release checkl…
Token Build Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into…
Ux Writing Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using…