Claude Marketplaces
SkillsMCP serversMarketplacesDigestTools
Submit

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP servers by category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control
Claude Marketplaces

An independent directory of skills, plugins and MCP servers for Claude Code. Not affiliated with Anthropic.

Browse

  • Skills
  • MCP servers
  • Marketplaces
  • Weekly digest
  • Skill index
  • MCP index
  • Marketplace index

Site

  • About
  • Tools
  • Submit
  • Feedback
  • Privacy
  • llms.txt
  • Plugins reference

Maker

  • Agent Caffeine
  • knobs
  • Wax
  • Snug
  • mertduzgun.com
Made by mertduzgun.com
Skills/Frontend Development
plugin87 avatar

Design Code

plugin87/ux-ui-agent-skills

Turns a component spec into production code for React, Next.js, SwiftUI, Vue, Svelte, Angular, React Native, Flutter, or a dozen other stacks.

installs
493
GitHub stars
3K
last updated
Jun 11, 2026
View on GitHubSave

Install

$ npx -y skills add plugin87/ux-ui-agent-skills --skill design-code --agent claude-code

Installs into .claude/skills of the current project.

Sponsors

CodeRabbitSponsoredTry For FreeLid closed, agents workingTry itOpen StepsSponsoredDownload for freeAppSignalSponsoredStart Free TrialKeep API keys from agentsGet SnugBlock apps on your iPhoneGet WaxDevtools for design engineersTry it livebelt - the only tool your agent needsSponsoredone prompt install

What it does

It follows a strict adapter protocol: every color, spacing, and font must trace back to design tokens, all eight interaction states are required, accessibility is wired per ARIA patterns, and dark mode comes standard. The verification checklist is ruthlessly specific. It will lint for hardcoded hex values, check contrast ratios with an actual script, and flag emoji used as icons. If you need a Button or Modal that ships with focus traps, reduced motion support, and zero placeholders, this is the tool. It assumes you care about completeness more than speed.

Files

Select a file.

Details

Repository
github.com/plugin87/ux-ui-agent-skills
Categories
Frontend Development, AI & Agent Building, Mobile Development, Design & UI/UX, CLI & Terminal
First seen
Jun 11, 2026

More from plugin87/ux-ui-agent-skills

All 17
  • Design Component491
  • Ux Writing487
  • Design Qa483
  • Brandkit476
  • Migrate Design System455
  • Performance455
  • Prototype454
  • Token Build450
  • Figma Integration448
  • Governance443
  • Image To Code685
  • Design Review562
  • A11y Audit518
  • Design Tokens506
  • Redesign502
  • Apply Aesthetic498

Recommended

More Frontend Development
1plugin87 avatarbrandkitplugin87/ux-ui-agent-skillsGenerate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), 476installs
2plugin87 avatarmigrate-design-systemplugin87/ux-ui-agent-skillsMap this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) —455installs
3plugin87 avatartoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 450installs
4nuxt avatarcontributingnuxt/uiGuide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guideline400installs
5syncfusion avatarsyncfusion-blazor-dataformsyncfusion/blazor-ui-components-skillsImplement Syncfusion Blazor DataForm component for creating dynamic, data-bound forms with validation and field management. Use this when building forms in Blaz370installs
6syncfusion avatarsyncfusion-blazor-pivot-tablesyncfusion/blazor-ui-components-skillsUse this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregati369installs