Skills Guide

HTML/CSS Design Expert

VerifiedSafe

Use for HTML/CSS layout, responsive behavior, and UI styling following the project design system. Reuse existing patterns and maintain accessibility.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
8/1/2026
Claude Code
#css#html#design-system#responsive-design#accessibility

Recommended for

Backend developerClaude CodeCode reviewFrontend developerFullstack developerRefactoring

Automated summary

This skill steers HTML/CSS work on the NestMind site by enforcing the light, editorial design system in css/styles.css (tokens, typography, existing components) along with responsive, motion, and accessibility rules.

Strengths

  • Requires using the :root tokens in css/styles.css for colors, spacing, typography, and motion, which keeps hard-coded values out of the code.
  • Locks responsive behavior to explicit breakpoints (640, 768, 1024 px), 44px minimum tap targets, and no horizontal overflow on small screens.
  • States clear accessibility baselines: semantic HTML, visible focus states, 4.5:1 contrast, and honoring prefers-reduced-motion.
  • Pushes reuse of existing classes (.container, .btn, .card, .hero, .nav…) before adding new ones, and says where global versus page-specific CSS belongs.

Limitations

  • It is tied to one repository (NestMind) and its css/styles.css, so it does not transfer cleanly to another project.
  • It does not list the actual token values or component definitions, so you still have to read the stylesheet.
  • It says nothing about JavaScript, visual regression testing, or automated contrast/responsive checks.
When to use it

Reach for it whenever a task changes layout, styling, or responsive behavior on pages of the NestMind site.

When not to use it

Skip it for work outside this repo's front-end, such as generic design-system work, backend changes, or copy-only edits.

Security analysis

Safe
Quality score92/100

The skill only uses read/edit/write/grep/glob tools for HTML/CSS work. It contains no destructive commands, network access, exfiltration, or unsafe patterns. The instructions are limited to design guidance within the repository.

No concerns found

How this analysis is made

Examples

Make the hero responsive
The .hero section on the NestMind home page overflows horizontally on phones. Fix the layout mobile-first using the existing 640px breakpoint and the spacing tokens in css/styles.css, without introducing new classes.
Restyle a card with tokens
Update the .card component in css/styles.css so its border radius, padding, and shadow all come from the existing :root tokens, keeping the serif-heading/sans-body pairing intact.
Add reduced-motion support
The .feature-detail hover animation uses width transitions. Rewrite it to animate only transform and opacity, and add a prefers-reduced-motion fallback that disables the transition.

name: design-expert description: Use for HTML/CSS layout, responsive behavior, and UI styling on the NestMind site; follow the Zed-inspired design system in css/styles.css and reuse existing patterns. allowed-tools: Read, Grep, Glob, Edit, Write

Design Expert

Use this skill when adjusting HTML/CSS, layout, or visual design in this repo. Keep the current editorial, light-theme aesthetic and reuse the design system.

Project rules (must)

  • Use tokens from css/styles.css (:root) for colors, spacing, typography, and motion.
  • Keep typography pairing: --font-serif for headings, --font-sans for body.
  • Default theme is light; add .dark overrides only when requested or already in use.
  • Prefer existing classes/components before creating new ones.

Responsive behavior

  • Mobile-first; use existing breakpoints at 640px, 768px, and 1024px.
  • Ensure tap targets are at least 44px and avoid horizontal overflow on small screens.
  • Use flex/grid with wrapping; avoid fixed widths on mobile.

Motion + performance

  • Animate with transform and opacity; avoid layout thrash.
  • Respect prefers-reduced-motion.

Accessibility

  • Use semantic HTML and visible focus states.
  • Maintain text contrast at 4.5:1 or higher.

File placement

  • Global styles: css/styles.css
  • Page-specific styles: css/vision.css, css/docs.css

Reuse first

  • Scan css/styles.css for existing patterns like .container, .btn, .card, .hero, .nav, .feature-detail, and .phone-mockup.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/html-css-design-expert-ms9wny80/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/html-css-design-expert-ms9wny80' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/html-css-design-expert-ms9wny80/download' --output '.skill-downloads/html-css-design-expert-ms9wny80/SKILL.md.part' && mv '.skill-downloads/html-css-design-expert-ms9wny80/SKILL.md.part' '.skill-downloads/html-css-design-expert-ms9wny80/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Tools declared by the author (check availability in your agent): Read, Grep, Glob, Edit, Write

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/html-css-design-expert-ms9wny80/SKILL.md' && test -s '.skill-downloads/html-css-design-expert-ms9wny80/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/design-expert' && cp -R '.skill-downloads/html-css-design-expert-ms9wny80' '.claude/skills/design-expert'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/html-css-design-expert-ms9wny80'

openskills read 'html-css-design-expert-ms9wny80'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/html-css-design-expert-ms9wny80/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot