skills.rest
erfanzar
erfanzarCOMMUNITY
Explore all skills by this author →
𝕏@Erfun07324313GitHub

popular-web-designs

Parse YAML frontmatter from skill units to extract structured metadata.

27|2|Updated Jan 15, 2024
Search Tags:#templates#design-patterns#css-tokens#design-systems#design-templates#ui-prompts
One-click install
npx skills add https://github.com/erfanzar/Xerxes-Agents --skill popular-web-designs-erfanzar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/erfanzar/Xerxes-Agents/tree/main/src/python/xerxes/skills/popular-web-designs
Command: npx skills add https://github.com/erfanzar/Xerxes-Agents --skill popular-web-designs-erfanzar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A centralized catalog of production-ready design system templates that accelerates UI prototyping, design-token education, and cross-team consistency by providing ready-made patterns, tokens, and prompts for popular sites.

Core Features & Use Cases

  • 54 production-quality design system templates covering tokens, typography, color systems, and components for sites like Airbnb, Stripe, Notion, Vercel, and more.
  • Load templates and generate standardized HTML/CSS tokens and component prompts to bootstrap projects quickly.
  • Use cases include rapid prototyping, design-system reference, and onboarding teams to canonical UI patterns.

Quick Start

Load a template via skill_view(name="popular-web-designs", file_path="templates/<site>.md") to generate HTML/CSS tokens and component prompts.

Frequently Asked Questions about popular-web-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are design system templates and how do they accelerate UI prototyping?▼

Design system templates are production-ready patterns, tokens, and component prompts for popular sites. They accelerate UI prototyping by providing standardized HTML/CSS tokens and canonical UI patterns to bootstrap projects quickly.

Can I use these design templates to extract CSS tokens for sites like Stripe or Notion?▼

Yes, you can load templates for sites like Stripe and Notion to extract standardized CSS tokens and generate component prompts. The parser validates YAML frontmatter to surface these design tokens for indexing.

How do I load a design template to generate HTML and CSS tokens?▼

Load a template via the skill view function by specifying the template file path. This generates standardized HTML/CSS tokens and component prompts to bootstrap your project quickly.

Which popular web design systems are included in the template catalog?▼

The catalog includes 54 production-quality design system templates covering tokens, typography, color systems, and components for sites like Airbnb, Stripe, Notion, and Vercel.

Does this catalog support cross-team consistency for onboarding designers?▼

Yes, the catalog provides ready-made patterns and canonical UI patterns that support design-token education and cross-team consistency, making it useful for onboarding teams to standardized workflows.

What metadata does the parser validate when indexing design system templates?▼

The parser validates YAML frontmatter fields including name, description, version, author, license, tags, and triggers. This structured metadata extraction enables discovery and indexing of design templates.

Related Skills

Explore More Design & Creative Skills→
0xdsgnrd0xdsgnrd
1

skill-creator

Generate, validate, and package self-contained Skill Units with YAML frontmatter.

Community
Advanced
wzyxdwllwzyxdwll
14

glassmorphism

Implement glassmorphism UI patterns with CSS backdrop-filter and tokens.css variables.

Community
Intermediate
danmartinez78danmartinez78

popular-web-designs

Convert web design templates into HTML/CSS UI components and patterns.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced