website-design-system

Design Community

Repo stars 136
Author repo envilder

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: >- Rules and patterns for the Envilder website's pure CSS design system. The site uses data-theme attribute on <html>. Two theme…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “When to Use”, “Themes”, “Rules”, “Responsive Breakpoints”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name website-design-system directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “When to Use / Themes / Rules” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Website Design System

Rules and patterns for the Envilder website's pure CSS design system.

When to Use

Creating new Astro components or page sections
Adding or modifying CSS (global or scoped)
Choosing between existing utility classes
Defining new CSS variables
Reviewing PRs that touch website styling

Themes

The site uses data-theme attribute on <html>. Two themes are supported:

Theme	Selector	Palette
Retro (default)	`:root`	Game Boy green
Light	`[data-theme="light"]`	Warm neutrals

Rules

All colors MUST use CSS variables — never hardcode hex values
New variables MUST be defined in both :root (retro) and [data-theme="light"] blocks in global.css
Never modify the theme switcher mechanism or its localStorage key

/* ✓ Correct */
color: var(--color-text);
background: var(--color-bg);

/* ✗ NEVER */
color: #8bac0f;
background: #1a1a2e;

Responsive Breakpoints

Mobile-first approach. Default styles target mobile; expand with min-width.

Breakpoint	Target	Pattern
Default	Mobile	Single column, compact spacing
`min-width: 640px`	Tablet	2-column grids, expanded spacing
`min-width: 1024px`	Desktop	3-4 column grids, full layout

Grid Utilities

Use existing grid classes: .grid-2, .grid-3, .grid-4.

Spacing & Layout

Use the spacing scale defined in global.css:

Variables: --space-xs through --space-4xl
Container max-width: --max-width (1200px)

Typography

Use	Font	Access
Section titles / pixel style	Press Start 2P	Via `.pixel-card h3` or custom class
Body text	Inter	Default (inherited)
Code / terminal	JetBrains Mono	`<code>`, `<pre>`, or mono class

Use clamp() for fluid typography
Never use fixed px font sizes

Component Patterns

Reuse existing CSS classes for visual consistency:

Class	Purpose
`.pixel-card`	Bordered cards with pixel corner notches
`.pixel-icon`	Emoji with pixelated filter
`.pixel-shadow`	4px offset retro shadow
`.badge`	Small label badges
`.pixel-divider`	Section separator
`.scanlines`	CRT overlay effect (use sparingly)
`.section`	Standard section wrapper with vertical padding

File Locations

What	Where
Global CSS	`src/website/src/styles/global.css`
Components	`src/website/src/components/*.astro`
Layout	`src/website/src/layouts/BaseLayout.astro`

Constraints

DO NOT install CSS frameworks or UI libraries — use existing pure CSS
DO NOT hardcode colors — always CSS variables from global.css
DO NOT use fixed pixel font sizes — use clamp() or relative units
DO NOT break existing responsive layouts when adding new sections
DO NOT add JavaScript frameworks (React, Vue) — Astro components + <script> tags only
ONLY add new CSS variables if defined in both theme blocks

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: Design
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 88 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @macalbert · no license declared
Fluxly token estimate: Lean
Fluxly setup estimate: Plug-and-play
External API key: No requirement detected
Detected OS requirements: Unspecified
Runtime requirements: Unspecified
Detected file/system behavior: Read-only
Write / modify
Detected network behavior: Local-only
Install commands: None (reference only)

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview website-design-system.preview

The current SKILL.md does not define a fixed output example.

SKILL.md SKILL.md

# Website Design System

Rules and patterns for the Envilder website's pure CSS design system.

## When to Use

- Creating new Astro components or page sections
- Adding or modifying CSS (global or scoped)
- Choosing between existing utility classes
- Defining new CSS variables
- Reviewing PRs that touch website styling

## Themes

The site uses `data-theme` attribute on `<html>`. Two themes are supported:

| Theme | Selector | Palette |
|-------|----------|---------|
| Retro (default) | `:root` | Game Boy green |
| Light | `[data-theme="light"]` | Warm neutrals |

### Rules

- **All colors MUST use CSS variables** — never hardcode hex values
- New variables MUST be defined in **both** `:root` (retro) and
  `[data-theme="light"]` blocks in `global.css`
- Never modify the theme switcher mechanism or its localStorage key

```css
/* ✓ Correct */
color: var(--color-text);
background: var(--color-bg);

/* ✗ NEVER */
color: #8bac0f;
background: #1a1a2e;
```

## Responsive Breakpoints

Mobile-first approach. Default styles target mobile; expand with `min-width`.

| Breakpoint | Target | Pattern |
|------------|--------|---------|
| Default | Mobile | Single column, compact spacing |
| `min-width: 640px` | Tablet | 2-column grids, expanded spacing |
| `min-width: 1024px` | Desktop | 3-4 column grids, full layout |

### Grid Utilities

Use existing grid classes: `.grid-2`, `.grid-3`, `.grid-4`.

## Spacing & Layout

Use the spacing scale defined in `global.css`:

- Variables: `--space-xs` through `--space-4xl`
- Container max-width: `--max-width` (1200px)

## Typography

| Use | Font | Access |
|-----|------|--------|
| Section titles / pixel style | Press Start 2P | Via `.pixel-card h3` or custom class |
| Body text | Inter | Default (inherited) |

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> When to Use → Themes → Rules → Responsive Breakpoints → Grid Utilities → Spacing & Layout
terms    -> All colors MUST use CSS variables · both · Rules and patterns for the Envilder website's pure CSS design system. · The site uses data-theme attribute on <html>. · Mobile-first approach. · Use existing grid classes: .grid-2, .grid-3, .grid-4.
files/cmd -> data-theme · <html> · :root · [data-theme="light"] · global.css · min-width · min-width: 640px · min-width: 1024px
body sha256 -> ded24f0e8ad6