futurism-designlisted

Apply the Futurism Design System — a Paper-Futurist web aesthetic (bold italic display type, a single red accent, square corners, solid offset shadows, and fast directional motion) with paired light and dark themes. Use this skill whenever the user asks to build, style, or restyle any web UI — a page, component, landing hero, dashboard, form, or full app — AND wants it to follow the Futurism look, OR invokes /futurism-design, OR references "futurism", "futurist", "paper futurism", "the red/cream design", or "our design system" in this repo. Trigger it even when the user only says "make a page" or "build a component" in a project that has adopted this system, so the output stays on-brand instead of defaulting to generic styling. This is an explicit, web-only design language — do not use it for terminal/CLI output.
Stoica-Mihai/claude-skills · ★ 0 · Web & Frontend · score 70

Install: claude install-skill Stoica-Mihai/claude-skills

# Futurism Design System A web design language: **Italian-Futurist energy, restrained editorial execution.** Motion, diagonals, one red, bold italic display — on warm paper (light) or warm carbon (dark). Use this skill to produce UI that obeys the system instead of generic AI styling. The look is fully specified; your job is to apply it faithfully. ## How to apply 1. **Reuse the stylesheet — do not re-derive it.** The complete kit lives in `assets/futurism.css`. Link or inline it; never hand-rewrite the tokens or component CSS. Behaviour for interactive parts is in `assets/futurism.js`. 2. For a single self-contained file (artifact, demo), inline both assets. 3. For a project, copy `assets/futurism.css` + `assets/futurism.js` in and import them once at the root. Both headers carry a **version stamp** — keep it in the vendored copy. To check for or apply an upgrade, compare that stamp against the plugin's `CHANGELOG.md` (one line per version) and read only the newer entries — don't diff the kit files; a kit update is a wholesale re-vendor either way. 4. When you need exact values or component markup, read the references: - `references/tokens.md` — color/spacing/type/motion tokens + the `:root` and `[data-theme="dark"]` blocks. - `references/components.md` — copy-paste HTML for every component, with the classes and the small JS hooks they need. 5. Default theme is **light**. Enable dark by setting `data-theme="dark"` on the root eleme