skills.rest
Cozythecoder
CozythecoderCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-md

Detect project type, extract tokens, and recommend matching design systems.

4|Updated Apr 9, 2026
Search Tags:#data visualization#design systems#parallax#svg generation#ui consistency#cinematic scroll
One-click install
npx skills add https://github.com/Cozythecoder/frontend-design-md --skill frontend-design-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-md
Source: https://github.com/Cozythecoder/frontend-design-md/tree/main
Command: npx skills add https://github.com/Cozythecoder/frontend-design-md --skill frontend-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill removes guesswork in UI consistency by turning design system knowledge and cinematic frontend patterns into actionable guidance and generation steps.

Core Features & Use Cases

  • Design system intelligence: Detects project type, extracts tokens, recommends a matching design system, and helps apply it with validation gates.
  • Cinematic “epic design” workflows: Guides scroll-driven 2.5D/parallax layout construction with quality rules and motion structure.
  • Visualization + SVG creation: Generates charts/tables from data and creates icons/logos as optimized SVG outputs.

Quick Start

Use the frontend-design-md skill to analyze your project and recommend the best-matching design system by running: /design analyze for my repository.

Frequently Asked Questions about frontend-design-md

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

FAQPage Schema
How do I apply a consistent design system across my web project?▼

Cinematic scroll UI relies on scroll-driven 2.5D parallax layouts. You can construct these layouts using guided motion structures and quality rules to achieve an epic design effect.

Can I generate SVG icons and charts directly from raw data?▼

Yes, you can generate optimized SVG outputs like icons and logos from descriptions, and create data visualizations such as charts and tables directly from your raw data inputs.

What is the best way to build a cinematic parallax scroll layout?▼

The best way to build cinematic parallax layouts is using scroll-driven 2.5D construction guidance that applies quality rules and motion structures for epic design workflows.

Does this design system recommendation tool work with existing repository references?▼

Yes, it works with existing repository references by reading them to discover design systems, map tokens, and execute provided scripts under allowed tooling constraints.

Why do I need automated design discovery for frontend web projects?▼

Automated design discovery removes guesswork in UI consistency by extracting tokens, recommending matching design systems, and enforcing quality validation gates across web projects.

Related Skills

Explore More Design & Creative Skills→
fcastrillofcastrillo

rai-discover-start

Detect project type, languages, and key directories into work/discovery/context.yaml.

Community
Intermediate
ZardLi1115ZardLi1115
4

p5js

Generate self-contained p5.js sketches with seeded randomness and export support.

Community
Advanced
BamoJBamoJ

scroll-anim

Create scroll-driven animations on DOM elements using GSAP, ScrollTrigger, and SplitText.

Community
Intermediate
jokken79jokken79
1

scroll-experience

Design scroll-driven storytelling with parallax, sticky sections, and scroll-triggered reveals.

Community
Advanced