embryo-design-system

Apply Embryo V4 CSS tokens and components to HTML UI development.

1|Updated Feb 24, 2026

Search Tags:#frontend #design system #UI #CSS #HTML #Embryo

Ready to run

npx skills add https://github.com/sebasdv/my-skills --skill embryo-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: embryo-design-system
Source: https://github.com/sebasdv/my-skills/tree/main/embryo-design-system
Command: npx skills add https://github.com/sebasdv/my-skills --skill embryo-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures that all UI development adheres to the specific, technical, and monochromatic aesthetic of the Embryo V4 design system, maintaining visual consistency across projects.

Core Features & Use Cases

Consistent Styling: Applies predefined CSS tokens for colors, typography, and spacing.
Component Implementation: Provides ready-to-use CSS and HTML for drum pads, sliders, headers, and layout scaffolding.
Retro-Technical Aesthetic: Enforces a look with hard edges, 8-bit typography, and specific accent colors for effects.
Use Case: When building a new feature for the embryo-player-v4 application, use this skill to ensure the new UI elements (like buttons or input fields) perfectly match the existing application's style.

Quick Start

Apply the Embryo V4 design system to a new HTML file by including the provided CSS root variables and body styles.

Frequently Asked Questions about embryo-design-system

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

FAQPage Schema

How do I apply a retro 8-bit UI design system to my HTML and CSS?▼

To apply a retro 8-bit UI design system to HTML and CSS, use predefined CSS tokens for colors, typography, and spacing to enforce a monochromatic aesthetic with hard edges and unified visual identity.

How do I implement drum-pad and slider components with a monochromatic technical aesthetic?▼

Implementing drum-pad and slider components involves applying ready-to-use CSS and HTML rules that enforce specific color palettes, hard edges, and accent colors for visual effects.

Can I use CSS tokens to ensure consistent styling across frontend web components?▼

Yes, you can use CSS tokens to ensure consistent styling across frontend web components by defining color, typography, and spacing variables that maintain visual consistency across projects.

What is the best way to add glitch animations and retro typography to a web interface?▼

The best way to add glitch animations and retro typography is by applying specific font families and animation rules defined within a technical UI design system.

Does this UI design system include layout scaffolding for headers and input fields?▼

Yes, the UI design system includes layout scaffolding for headers and input fields, providing ready-to-use HTML and CSS to ensure new elements match the existing application style.