- 📄 README.md
- 📄 SKILL.md
- 📄 webdev-claude-ai.skill
Comprehensive frontend design quality skill — creates distinctive, production-grade UIs and iteratively improves them. Merges 20 design operations (audit, polish, animate, typeset, colorize, arrange, adapt, harden, etc.) into one unified workflow. Use when building, reviewing, improving, or polishing any frontend: websites, dashboards, components, landing pages, React apps, HTML/CSS. Also triggers on: responsive design, accessibility, animation, typography, color, layout, UX review, performance, design system alignment, onboarding flows, error handling, i18n, or any request to make UI look less AI-generated. Even if the user just says 'make it look better' or 'polish this', use this skill.
- 📁 references/
- 📄 composition-principles.md
- 📄 SKILL.md
- 📄 theme-implementation.md
Build, design, improve, or fix any UI using production-grade design tokens and specs from Google Material Design 3 and Apple HIG. Access 86 reference files with exact colors, dimensions, CSS, all interaction states (hover/focus/active/disabled), dark mode tokens, animations, page-level composition patterns, editorial typography, and icon systems (Material Symbols + SF Symbols). Trigger when user mentions: building UI, designing pages/components/forms/dashboards, Material Design, Apple HIG, or professional-looking interfaces. The specs prevent guessing colors and missing states — you produce pixel-perfect output with proper theming and composition.
Guide for discovering 540+ developer tools, design resources, AI platforms, and agencies using the thetoolforthat MCP server. Use when asked to find tools for a project, recommend tech stack components, discover design agencies, or search for specific tool categories.
Applies University of Hawaiʻi at Mānoa official brand colors, typography, and design standards to any artifact that benefits from UH Mānoa's institutional look-and-feel. Use when brand colors or style guidelines, visual formatting, document styling, presentation design, or university design standards apply. Also use when creating materials for Shidler College of Business courses.
Use when starting creative work — designing features, adding functionality, modifying behavior, or exploring approaches. Guides collaborative design exploration through one-at-a-time questions, approach proposals, and incremental design approval. Hard gate: no code until design approved.
- 📁 examples/
- 📁 references/
- 📁 scripts/
- 📄 README.md
- 📄 report-templates.md
- 📄 SKILL.md
Identify Figma design changes and generate code update checklists. Use when the user asks to "check Figma updates", "track design changes", "what changed in Figma", "create changelog from Figma", or "what code needs updating based on Figma".
- 📁 references/
- 📄 .gitignore
- 📄 README.md
- 📄 README_EN.md
Production-grade Agent development methodology extracted from Claude Code. 7-dimension framework covering tool design, system prompts, permission & safety, multi-agent orchestration, token economy, memory/state, and extensibility. Supports architecture design, implementation guidance, and agent review. Trigger on "Agent design", "build an agent", "AI agent", "tool design", "system prompt architecture", "agent review", "multi-agent", or any agent development concern.
Review architectural decisions and design patterns for scalability and maintainability. Trigger with "review the architecture", "is this design scalable", "architecture feedback", or "design review".
- 📁 components/
- 📁 dashboards/
- 📁 foundations/
- 📄 cognitive-core-ui.skill
- 📄 SKILL.md
Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.
- 📄 conflicts.md
- 📄 reference.md
- 📄 SKILL.md
Gebruik deze skill wanneer de gebruiker vraagt over 'API Design Rules', 'ADR', 'REST API standaard', 'API richtlijnen', 'NL GOV API', 'Spectral linter', 'API linter', 'OpenAPI validatie', 'API design', 'REST API naming', 'transport security', 'API signing', 'API encryption', 'geospatial API', 'api-linter', 'problem+json', 'error response format'.
Run skill design compliance validation for agentic collections. Use when the user asks to: - "Check skill compliance" / "Validate skill design" / "Run compliance check" - "Verify my skills follow design principles" - Before committing skill changes Runs the validate_skill_design.py script against SKILL_DESIGN_PRINCIPLES.md. --- # Skill Design Compliance Checker Run the programmatic compliance check for skills in this agentic-collections repository. ## When to Use This Skill
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.