Skip to content

Skills Directory

Skills Learn Security Categories Docs Blog Pro Advertise

Claude Skills by majiayu000

github.com/majiayu000

15,502 skillsA× 14,856B× 442C× 135D× 43F× 26859 installs33,165 views

Design ReportAGenerate status reports for design documentation. Use when creating documentation summaries, tracking progress, or preparing documentation reviews.documentationgobashVotes: 0GitHub stars: 666
Design ResearchAConduct research and create design documents before implementation. Use when analyzing requirements, exploring solutions, creating architecture designs, or investigating codebase patterns. Invoked by: "research", "design", "analyze", "investigate", "explore codebase".developmentgobashVotes: 0GitHub stars: 666
Design Responsive Vuralserhat86 Antigravity AgenticABreakpoints, fluid typography, container queries ve modern CSS features.developmentjavascripttypescriptVotes: 0GitHub stars: 666
Design ResponsiveAMobile-first responsive design for beautiful, multi-device UIs. Breakpoints, fluid layouts, touch optimization, and creative responsive patterns for distinctive experiences across screens. Use when building responsive UIs or adapting for mobile/tablet/desktop: - Creating mobile-first layouts, responsive landing pages, web apps - Defining breakpoints and fluid typography (mobile/tablet/desktop sizes) - Optimizing for touch devices, mobile users, smartphone/tablet interactions - Responsive com...designgotestingVotes: 0GitHub stars: 666
Design Review Async Io Pierre Mcp ServerAReview UI components for design system compliance, accessibility, and visual consistencydevelopmentbashreactVotes: 0GitHub stars: 666
Design Review Edwardmonteiro Aiskillinpractice 0902dae0AFacilitate a cross-functional design review capturing decisions, feedback, and implementation guidance.toolsgobashVotes: 0GitHub stars: 666
Skills DirectorySkills Directory Pro Download any skill as a ZIP for Claude.ai, Claude Desktop, or .claude/skills.See Pro
Design ReviewAReview and analyze design docs for health, quality, and improvement opportunities. Use when auditing design documentation, checking doc health, or identifying areas for improvement.documentationbashapiVotes: 0GitHub stars: 666
Design Scalardb AnalyticsAScalarDB Analytics設計エージェント - ScalarDB Analyticsを使用した分析基盤の設計。Apache Sparkベースの分析クエリ、マルチDB横断分析を策定。/design-scalardb-analytics [対象パス] で呼び出し。databasesbashsqlVotes: 0GitHub stars: 666
Design ScalardbAScalarDB設計エージェント - ScalarDB Clusterを使用したマイクロサービスのデータアーキテクチャ設計。分散トランザクション、スキーマ設計、ポリグロット永続化を策定。/design-scalardb [対象パス] で呼び出し。databasesjavabashVotes: 0GitHub stars: 666
Design SchemaADesign complete database schemas with tables, relationships, constraints, and indexes for Supabase. Triggers when user describes data models, entities, or requests schema design.databasessqldatabaseVotes: 0GitHub stars: 666
Design SearchAFull-text search across design documentation. Use when looking for specific topics, decisions, or patterns documented across design docs.documentationgobashVotes: 0GitHub stars: 666
Design SkillA프레젠테이션 슬라이드를 미려한 HTML로 디자인. 슬라이드 HTML 생성, 시각적 디자인, 레이아웃 구성이 필요할 때 사용.businessgoVotes: 0GitHub stars: 666
Design SpecACreate UI/UX design specifications from requirements or Figma designs. Covers component specs (Atom/Molecule/Organism), accessibility audits (WCAG 2.1 AA), design tokens, responsive behavior, and dev handoffs. Triggers on "design spec", "ui spec", "component spec", "accessibility audit", "design handoff", "design tokens", "wireframe", "mockup".documentationbashnodeVotes: 0GitHub stars: 666
Design SpecialistA提供 UI/UX 设计、用户研究、视觉设计和品牌一致性能力。当需要设计界面、进行用户研究或创建视觉资产时使用。documentationVotes: 0GitHub stars: 666
Design StealerACopies an existing landing page (from URL or image) into a specified page in the codebase using Playwright MCP. Iteratively refines the implementation until it matches the reference design and interactions as closely as possible. Use when the user wants to copy/reference/steal an existing landing page/url to replicate in their appdocumentationgoreactVotes: 0GitHub stars: 666
Design StyleAUse this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific des...developmentgoreactVotes: 0GitHub stars: 666
Design StylesAAccess 263+ design styles with AI-optimized prompt keywords for frontend developmentdesignrustgoVotes: 0GitHub stars: 666
Design Super AgentAMaster expert in product design for complex systems with 10+ years of experience in data-driven systems, operational dashboards, and enterprise SaaS. Integrates six comprehensive areas - UX analysis, UI design, microcopy, user research & flows, personas & journeys, and WCAG accessibility - into one holistic review. Provides end-to-end design analysis with structured recommendations across all design layers. Use when user needs comprehensive design review covering multiple aspects (UX + UI + C...designrustgoVotes: 0GitHub stars: 666
Design SyncASync design docs with codebase state. Use when verifying documentation accuracy, after code changes, or when last-synced is stale.documentationgobashVotes: 0GitHub stars: 666
Design SynthesizerAAuto-activates when synthesizing outputs from multiple parallel sub-agentsdocumentationpythonbashVotes: 0GitHub stars: 666
Design System AnalyzerAUse when analyzing UI screenshots or designs to extract and document design system elements. Analyzes images to identify colors, typography, spacing, components, and patterns, then generates a structured design system with design tokens and CSS snippets. Ideal for reverse-engineering designs, creating style guides, or documenting existing UIs.businessgodocumentationVotes: 0GitHub stars: 666
Design System ArchitectAExpert in building scalable design systems with Atomic Design, design tokens, and theming infrastructure. Use when creating component libraries, implementing dark mode, or establishing typography and color systems. Covers multi-brand support, Storybook-driven development, and accessibility-first component APIs.designtypescriptgoVotes: 0GitHub stars: 666
Design System ArchitectureABuild scalable design systems with design tokens, component APIs, and documentation. Use when creating or evolving component libraries.developmenttypescriptgoVotes: 0GitHub stars: 666
Design System CliAComplete Design System Reverse Engineering (DSRE) + Functional Cloning CLI - Extract visual design (tokens, assets) AND functional behavior (workflows, state machines, business rules) from any web applicationdevelopmentjavascripttypescriptVotes: 0GitHub stars: 666
Design System CreatorABuilds comprehensive design systems and design bibles with production-ready CSS. Expert in design tokens, component libraries, CSS architecture. Use for design system creation, token architecture, component documentation, style guide generation. Activate on "design system", "design tokens", "CSS architecture", "component library", "style guide", "design bible". NOT for typography deep-dives (use typography-expert), color theory mathematics (use color-theory-palette-harmony-expert), brand iden...documentationrustgoVotes: 0GitHub stars: 666
Design System EnforcementAMandatory design system guidelines for shadcn/ui with Tailwind v4. Enforces 4 font sizes, 2 weights, 8pt grid spacing, 60/30/10 color rule, OKLCH colors, and accessibility standards. Use when creating components, pages, or any UI elements. ALL agents MUST read and validate against design system before generating code.toolsbashreactVotes: 0GitHub stars: 666
Design System FoundationAUse when starting a new React Native or Next.js project to establish design system foundation - creates design tokens, folder structure, component architecture, and documentation scaffolding for consistent UI developmentdevelopmenttypescriptgoVotes: 0GitHub stars: 666
Design System FoundationsAExpert Design System avec approche Atomic Design industrielle. Utilise ce skill quand: (1) création ou audit d'un design system, (2) définition des tokens (couleurs, typo, espacements), (3) construction de composants atomiques, (4) documentation des patterns UI, (5) garantir la cohérence visuelle cross-platform.documentationtestinggitVotes: 0GitHub stars: 666
Design System Franais DsfrADocumentation et accessibilité concernant le Design System Français (DSFR), un ensemble de composants et de bonnes pratiques pour créer des interfaces utilisateur conformes aux standards du gouvernement français. Use when user wants to implement DSFR components, needs DSFR documentation, asks about French government design system, requires RGAA accessibility guidelines, works with French government websites, or needs HTML/CSS examples for accessible components.developmentjavascriptgoVotes: 0GitHub stars: 666
Design System ImplementationABuild or update frontend components and pages that strictly adhere to the project design system defined in design/design-system.json (and design/design.json when present).developmentreactexpressVotes: 0GitHub stars: 666
Design System ManagerACreate and manage design systems with design tokens, theming (light/dark mode), standardized spacing, colors, typography, and component registrydevelopmentjavascripttypescriptVotes: 0GitHub stars: 666
Design System Modern OklchAUse when setting up modern UI design systems with OKLCH colors, Shadcn components, and Tailwind v4 - provides production-ready design tokens, component patterns, and complete setup for cutting-edge color sciencedevelopmenttypescriptgoVotes: 0GitHub stars: 666
Design System Planning Prorise Cool Claude Code Multi AgAPlan design systems - component libraries, design tokens, documentation strategies, versioning, governance, and adoption frameworks.documentationgoreactVotes: 0GitHub stars: 666
Design System Token ArchitectureAArchitect scalable design token propagation using React Context and CSS-in-JS/Variables.developmentreactfrontendVotes: 0GitHub stars: 666
Design System WorkflowASwift Design Systemを使用したiOS UI実装スキル。デザイントークン（カラー、タイポグラフィ、スペーシング、角丸、モーション、エレベーション）、UIコンポーネント（Button、Card、Chip、FAB、Snackbar、Picker）、レイアウトパターン（AspectGrid、SectionCard）のベストプラクティスを提供。「デザイン」「UI」「テーマ」「カラー」「色」「タイポグラフィ」「フォント」「スペーシング」「余白」「角丸」「アニメーション」「ボタン」「カード」「チップ」「グリッド」「レイアウト」「FAB」「Snackbar」「Picker」「SwiftUI」「DesignSystem」などのキーワードで自動適用。developmentgoswiftVotes: 0GitHub stars: 666
Design SystemAStepLeague design system, theme configuration, CSS variables, badge styling, and UI patterns. Use when working with colors, themes, styling, badges, buttons, cards, or any visual UI changes. Keywords: CSS, theme, colors, dark mode, light mode, variables, styling, UI, design.developmenttypescriptgoVotes: 0GitHub stars: 666
Design SystemsABuild or evolve a design system by producing a Design System Operating Pack: charter, token model (incl. depth/elevation), component inventory + roadmap, blockframe-to-component mapping, documentation plan, and governance/adoption plan. Use for design systems, component libraries, design tokens, UI kits, and pattern libraries.documentationgorailsVotes: 0GitHub stars: 666
Design ThemeADESIGN-THEMEdevelopmentjavascriptgoVotes: 0GitHub stars: 666
Design To CodeAUse this skill when the user uploads a design screenshot, shares a Figma export, provides a mockup image, or asks to "convert design to code", "build from mockup", "generate component from screenshot", "extract design to React", or wants to transform visual designs into production-ready components using Claude's vision capabilities.developmentbashreactVotes: 0GitHub stars: 666
Design To Component TranslatorAConverts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, disabled, active). Generates Tailwind/shadcn code with design system tokens mapping. Use when translating "Figma to code", "design specs to components", or "implement design system".developmentjavascripttypescriptVotes: 0GitHub stars: 666
Design To ProjectA--- description: Full AI-AGENT-PLAYBOOK orchestration - transforms a design specification into project artifacts and begins implementation tags: [design, planning, project-init, tasks, implementation, orchestration] techStack: [all] appliesTo: ["projects/*/spec.md", "implement spec", "design to project"] alwaysApply: false ---developmenttypescriptgoVotes: 0GitHub stars: 666
Design To SpecA--- description: Transform human design documents into AI-optimized spec.md files tags: [project-init, design, spec, planning, transformation] techStack: [all] appliesTo: ["projects/*/design.md", "projects/*/design.docx", "transform spec", "design to spec"] alwaysApply: false ---documentationshellbashVotes: 0GitHub stars: 666
Design Token ExtractorAExtracts design tokens from images and generates CSS custom properties, atomic utility classes (Tailwind-style), and platform-specific formats following W3C standards and modern CSS best practices.developmentpythongoVotes: 0GitHub stars: 666
Design Token ManagementAUse when implementing design token systems, CSS variable architectures, or Style Dictionary pipelines. Covers token schemas, naming conventions, token transformations, and multi-platform token delivery for design systems.developmentjavascriptgoVotes: 0GitHub stars: 666
Design Token OrchestratorAUnified design token automation for Northcote Curio. Build, validate, and sync design tokens across CSS, Tailwind, and theme systems. Ensures compliance with Northcote palette and Victorian aesthetic principles.developmentpythongoVotes: 0GitHub stars: 666
Design Token SyncAUse this skill when users mention "sync design tokens", "Figma to code", "design system sync", "token drift", "keep tokens in sync", or want to synchronize design tokens between Figma and codebase bidirectionally with automatic drift detection and conflict resolution.developmentjavascripttypescriptVotes: 0GitHub stars: 666
Design Token ValidatorAEnsures CSS and components only use approved design tokens. Use when the user asks about design system enforcement, hardcoded colors, spacing values, or wants to validate token usage across files.developmentjavascripttypescriptVotes: 0GitHub stars: 666
Design Tokens StructureAArchitects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.developmentgoVotes: 0GitHub stars: 666
Design Tokens ValidatorA[Design System] Validate that code and styles use official design tokens instead of hard-coded values. Use when (1) reviewing CSS/SCSS/Tailwind/styled-components for hard-coded colors/spacing, (2) checking SwiftUI/UIKit for raw color/font values, (3) auditing Unity styles for magic numbers, (4) enforcing design system compliance, (5) user asks to 'check design tokens', 'validate tokens', 'find hard-coded values', or 'audit design system usage'.developmentpythongoVotes: 0GitHub stars: 666
Design TokensAPulse Radar design system - semantic colors, spacing grid, component patterns.developmenttypescriptgoVotes: 0GitHub stars: 666

First Previous 59 60 616263 64 65 Next Last

Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Stay in the loop

Get weekly updates on the best new skills and tutorials.

Email address

Directory

Browse skills
All skills A–Z
Claude skills
Claude Code skills
Agent skills
Categories
Authors
Submit a skill

Learn and security

Learn hub
Install Claude skills
Write SKILL.md
Skills vs MCP
Directories compared
Security
Security methodology
Secure Claude skills
Security badges

Company

About
Pro
Blog
API docs
Chrome extension
Skill Manager
Advertise
Terms
Privacy
Refunds

© 2026 Skills Directory. All rights reserved.