skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-dial

Adjusts one design-system axis across all tokens with guardrails and re-scoring.

Updated May 26, 2026
Search Tags:#theming#accessibility#design system#design tokens#tailwind#ui density#style adjustment
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-dial-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-dial
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-dial
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-dial-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Requests like "make it denser" or "more muted" usually produce inconsistent one-off edits: some tokens change, the 8px grid breaks, or a second accent sneaks in. This Skill turns a single design axis adjustment into a deterministic, system-wide transform that respects accessibility and design guardrails. ## Core Features & Use Cases - Seven defined axes: density, hierarchy contrast, radius, elevation, color (saturation/temperature), font weight, and motion energy, each with a bounded ramp of named positions. - Coordinated token updates: moves every affected token across the whole project (not just the visible component), then persists the new position to STYLESEED.md. - Guardrail enforcement: clamps at ramp ends, keeps touch targets ≥44px, preserves a single accent hue, bans dark-mode drop shadows, and re-runs the quality gate (score ≥ 80) after every change. - Use Case: A user says "density denser" on a data-heavy dashboard; the Skill moves spacing, card padding, gaps, and line-height one step down the ramp everywhere, updates the lock file, and re-scores the result. ## Quick Start Ask the assistant to dial one axis, for example: "Use ss-dial to make the interface density denser and re-run the quality gate."

Frequently Asked Questions about ss-dial

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

FAQPage Schema
How do I make a UI denser without breaking the spacing grid?▼

Use the density axis, which moves section spacing, card padding, grid gaps, and line-height one step along the airy-to-dense ramp together. It stays on the 8px grid and keeps touch controls at 44px minimum even at the densest position.

What is the difference between ss-dial and ss-restyle?▼

ss-dial moves exactly one axis (e.g., radius sharper) along a defined ramp. ss-restyle applies a named aesthetic preset, which is a combination of positions across several axes, for mood words like premium or editorial.

Can I change the accent color hue with this Skill?▼

The color axis only shifts saturation and temperature of the existing single accent in HSL and re-derives its tints. To rebrand with a new hue, edit the Key color in STYLESEED.md directly and re-derive from there.

What happens if a dial request would break an accessibility rule?▼

Guardrails override the dial. If a move would push a touch target below 44px, drop body text below the surface floor, or add a drop shadow in dark mode, the Skill stops at the allowed floor and reports the limit instead of shipping the change.

When should I not use ss-dial?▼

Skip it for vague vibe words the model can apply directly, for named aesthetics (use ss-restyle), and when no STYLESEED.md lock exists yet (run ss-build or ss-setup first). It also refuses to move past a ramp's end position.

Related Skills

Explore More Design & Creative Skills→
dawitlabsdawitlabs
3

design-grill

Interview stakeholders to generate a project-root DESIGN-BRIEF.md for UI design.

Community
Advanced
huichenhuichen

qa

Automate end-to-end QA testing of web applications and fix bugs iteratively.

Community
Advanced
Darsh20009Darsh20009

design-exploration

Construct a structured design brief before delegating design exploration.

Community
Advanced
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic