skills.rest
macalbert
macalbertCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-design-system

Applies CSS variables, breakpoints, and component patterns to Astro website styling.

138|5|Updated Sep 19, 2024
Search Tags:#theming#responsive design#design system#css#astro#css variables#web styling
One-click install
npx skills add https://github.com/macalbert/envilder --skill website-design-system-macalbert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-design-system
Source: https://github.com/macalbert/envilder/tree/main/.github/skills/website-design-system
Command: npx skills add https://github.com/macalbert/envilder --skill website-design-system-macalbert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling a website without a shared design system leads to hardcoded colors, inconsistent spacing, and broken responsive layouts. This Skill enforces the Envilder website's pure CSS design system so every Astro component and page stays visually consistent across retro and light themes. ## Core Features & Use Cases - Theme-safe styling: Enforces CSS variables defined in both :root (retro) and [data-theme="light"] blocks, banning hardcoded hex colors. - Responsive layout rules: Mobile-first breakpoints at 640px and 1024px with reusable grid utilities like .grid-2, .grid-3, and .grid-4. - Component pattern library: Reusable classes such as .pixel-card, .pixel-shadow, .badge, and .scanlines for consistent retro visuals. - Use Case: When adding a new section to an Astro page, the Skill guides you to use existing spacing variables, fluid clamp() typography, and the correct component classes instead of inventing one-off styles. ## Quick Start Ask the AI to create a new Astro component for the website that follows the design system with theme-safe CSS variables and responsive grid layout.

Frequently Asked Questions about website-design-system

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

FAQPage Schema
How do I add a new color to a multi-theme CSS design system?▼

Define the color as a CSS variable in both the `:root` block for the retro theme and the `[data-theme="light"]` block for the light theme in global.css. Then reference it everywhere with `var(--your-variable)` instead of hardcoding hex values.

How do I style Astro components without a CSS framework?▼

Use global CSS variables for colors and spacing, plus existing utility classes like `.pixel-card`, `.grid-2`, and `.section`. Astro supports scoped styles in components, so you can combine them with the shared design tokens from global.css.

What breakpoints should I use for mobile-first responsive design?▼

Write default styles for mobile, then add `min-width: 640px` for tablet two-column grids and `min-width: 1024px` for desktop three- or four-column layouts. This mobile-first approach keeps base styles simple and progressively enhances larger screens.

Can I use React or Tailwind with this Astro website?▼

No. The design system explicitly prohibits CSS frameworks, UI libraries, and JavaScript frameworks like React or Vue. Styling uses pure CSS with variables, and interactivity uses Astro components with plain `<script>` tags only.

Why should font sizes use clamp() instead of fixed pixels?▼

Fixed pixel font sizes break fluid layouts across screen sizes. Using `clamp()` lets typography scale smoothly between minimum and maximum values based on viewport width, keeping text readable on mobile and proportional on desktop.

Related Skills

Explore More Design & Creative Skills→
njculpinnjculpin

audit-style

Audit CSS in Astro and SolidJS files for BEM and design token compliance.

Community
Advanced
7Lemaitre77Lemaitre7

astro

Create .astro components and configure islands for content-driven websites.

Community
Intermediate
mdmagnuson-creatormdmagnuson-creator

screenshot

Capture Playwright screenshots of web pages in light and dark themes.

Community
Intermediate
0xKobold0xKobold
4

tailwind-v4

Configure Tailwind CSS v4 with CSS-first design tokens and @theme.

Official
Advanced