SkillMD SkillMD
light-dark-mode
Profile My skills Saved Collections Edit profile Submit a skill

← all plugins

Design System Foundation

curated by SkillMD · plugin · 16 skills

Create design tokens, principles, and naming conventions for a new design system.

Install the whole plugin (CLI)
npx skillmds add owl-listener/design-principles npx skillmds add owl-listener/naming-convention npx skillmds add owl-listener/design-token npx skillmds add owl-listener/documentation-template npx skillmds add nextlevelbuilder/brand npx skillmds add nextlevelbuilder/design-system npx skillmds add voltagent/cal-com-design-analysis npx skillmds add voltagent/miro-design-analysis npx skillmds add voltagent/nvidia-design-analysis npx skillmds add voltagent/ollama-design-analysis npx skillmds add majiayu000/aica npx skillmds add tinh2/design-color npx skillmds add tinh2/design-setup npx skillmds add comeonoliver/extract npx skillmds add kvn8888/openfoodjournal-ui npx skillmds add drnabeelkhan/maxim-brand
⬇ Download

Skills in this plugin

  1. ▌
    design-principles · owl-listener
    Define a set of actionable design principles that guide decision-making and resolve trade-offs.
    1.7k
    repo stars
  2. ▌
    naming-convention · owl-listener
    Establish clear naming conventions for design assets, components, and tokens to make design systems predictable and maintainable.
    1.7k
    repo stars
  3. ▌
    design-token · owl-listener
    Define and organize design tokens for color, spacing, typography, elevation, and motion with naming conventions and usage guidance.
    1.7k
    repo stars
  4. ▌
    documentation-template · owl-listener
    Generate structured documentation templates for components, patterns, or guidelines within a design system.
    1.7k
    repo stars
  5. ▌
    brand · nextlevelbuilder bundle
    Defines and manages brand identity including voice, visual standards, messaging frameworks, asset organization, and consistency audits.
    10
    installs
  6. ▌
    design-system · nextlevelbuilder bundle
    Creates and manages design tokens with a three-layer architecture (primitive, semantic, component), generates CSS variables and component specifications, and produces brand-compliant slide presentations with Chart.js integration.
    4
    installs
  7. ▌
    cal-com-design-analysis · voltagent bundle
    Analyzes and documents the Cal.com design system, including color tokens, typography hierarchy, spacing, and component patterns for use in design implementations.
    50.9k
    repo stars
  8. ▌
    miro-design-analysis · voltagent bundle
    Documents Miro's brand design system including colors, typography, layout, and component patterns for visual consistency.
    50.9k
    repo stars
  9. ▌
    nvidia-design-analysis · voltagent bundle
    Provides a design system specification for NVIDIA's marketing pages, including color tokens, typography hierarchy, and component patterns for building engineering-style landing pages.
    50.9k
    repo stars
  10. ▌
    ollama-design-analysis · voltagent bundle
    Documents the design system behind Ollama's marketing site, including color tokens, typography hierarchy, spacing, and component patterns for a minimal, documentation-first aesthetic.
    50.9k
    repo stars
  11. ▌
    aica · majiayu000 bundle
    Provides Kelvin Garr's fixed AICA brand identity and Next.js 14 implementation guide for building his personal sites and AICA-branded projects.
    567
    repo stars
  12. ▌
    design-color · tinh2
    Adds strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes, generating harmonious color systems with automatic light/dark variants and accessible contrast ratios.
    13
    repo stars
  13. ▌
    design-setup · tinh2
    Scans a codebase to extract design tokens, typography, colors, spacing, and brand patterns, then writes a Design Context section to CLAUDE.md without asking questions.
    13
    repo stars
  14. ▌
    extract · comeonoliver
    Identifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.
    61
    repo stars
  15. ▌
    openfoodjournal-ui · kvn8888
    Defines the design tokens, component catalog, and layout patterns for the OpenFoodJournal SwiftUI app, ensuring new views stay visually consistent.
    3
    repo stars
  16. ▌
    maxim-brand · drnabeelkhan bundle
    Builds and enforces brand identity through structured agents covering positioning, voice, visual systems, and consistency audits, with behavioral science frameworks applied throughout.
    2
    repo stars