HTML CSS First

Prefer modern HTML and CSS solutions over JavaScript-heavy implementations. Use this skill whenever building or reviewing frontend code — especially for UI patterns like modals, accordions, tabs, tooltips, form validation, animations, dropdowns, carousels, sticky headers, and toggles. Trigger on any request to build a UI component or page, even if the user doesn't explicitly ask for "CSS-only" — always check whether a native HTML element or CSS feature can replace a JS solution first. Also trigger when reviewing existing code for opportunities to reduce JavaScript by using modern browser capab

6 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add macdonst/html-css-first --skill html-css-first

Manual install

git clone --depth 1 https://github.com/macdonst/html-css-first.git /tmp/html-css-first
mkdir -p ~/.claude/skills
cp -r /tmp/html-css-first/. ~/.claude/skills/html-css-first

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# HTML & CSS First

A skill for preferring modern HTML and CSS solutions over JavaScript-heavy implementations. Before reaching for JavaScript, always ask: **can a browser-native element or CSS feature do this?**

## Core Philosophy

Modern browsers (2023+) ship powerful primitives that replace entire JS libraries. JavaScript should be added only when:
1. State must be persisted (localStorage, server)
2. Data must be fetched (API calls)
3. Complex user-generated content must be manipulated
4. Truly dynamic behavior can't be expressed declaratively

For nearly everything else, there's a native solution.

---

## Decision Tree: JS or No JS?

```
Is this a UI pattern (modal, accordion, tooltip, dropdown)?
  → Check the Native Elements reference first

Is this an animation or transition?
  → Use CSS @keyframes / transition / scroll-driven animations

Is this form behavior (validation, required fields, patterns)?
  → Use HTML constraint validation attributes

Is this layout (sticky, overlap, responsive)?
  → Use CSS (grid, position: sticky, container queries)

Is this a toggle / show-hide?
  → Use <details>, :has(), CSS :checked hack, or popover API

Does this require a network request (fetch, API call, form submission to a server)?
  → JS is appropriate — but still use HTML/CSS for all surrounding UI (validation,
     loading states via CSS, success/error display via :has() or class toggle)

Only after exhausting the above → reach for JavaScript
```

---

Read the full skill on GitHub

Details

Skill name: html-css-first
Repository: macdonst/html-css-first
Repo updated: 20 May 2026

FAQ

What does the HTML CSS First skill do?

How do I install the HTML CSS First skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add macdonst/html-css-first --skill html-css-first. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML CSS First popular?

It lives in macdonst/html-css-first, which has 6 GitHub stars and 1 forks.

Related skills

Nature Style

Zhangyanbo/nature-style-skill

Nature-journal house style for publication-ready scientific figures, optimised for Python/matplotlib plotting. Bundles palette.py (a drop-in matplotlib style module with the Nature-style house palette, Wong colourblind-safe set, point-scale type, safe stroke weights, and helpers) plus the full design system as CSS tokens and figure components for HTML/SVG. Use this skill whenever creating or restyling any chart, plot, diagram, schematic, or multi-panel figure for a scientific paper or analysis — matplotlib/seaborn code, an HTML/SVG mock, choosing colours for scientific data, or preparing figur

Frontend & Design

Handdraw Skill

ToBeWin/HandDraw-Skill

Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.

Frontend & Design

Russian Text Quality

Anic888/russian-text-quality

Use when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.

Frontend & Design

Apple Design

bowen31337/apple-design

Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri

Frontend & Design

UI UX Fixer

nerdstalker/ui-ux-fixer

Advise on and critique UI/UX design work through the lens of Luke Wroblewski's published principles, using his MCP archive to retrieve relevant writings, presentations, videos, and other source material for each task. Use this skill whenever the user asks for a design review, UX critique, or feedback on a screen, page, form, sign-up flow, checkout, mobile layout, navigation scheme, or AI/agent interface — or asks "what would LukeW say," mentions Luke Wroblewski, or wants design advice grounded in established best practices rather than taste. Also use it when the user asks to fix or improve a U

Frontend & Design

Yafa UI Dashboard

rejourneyco/yafa-ui-dashboard

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.