impeccable

Name: impeccable
Author: RafaelGorski

30stars4forks

How to install impeccable?

rafaelgorski/problem-based-srs/impeccable

$npx -y skills add RafaelGorski/Problem-Based-SRS --skill impeccable

Installs into the current project.

Summary

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, se

Files · 1

View on GitHub

SKILL.md

1	Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
2
3	## Setup
4
5	You MUST do these steps before proceeding:
6
7	1. Run `node .agents/skills/impeccable/scripts/context.mjs` once per session. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports `NO_PRODUCT_MD`, stop and follow `reference/init.md` before doing anything else. If the output ends with an `UPDATE_AVAILABLE` directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
8	2. If the user invoked a sub-command (`craft`, `shape`, `audit`, `polish`, ...), you MUST read `reference/<command>.md` next. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
9	3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
10	4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read `reference/brand.md`. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read `reference/product.md`. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) `register` field in PRODUCT.md.
11	5. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run `node .agents/skills/impeccable/scripts/palette.mjs` to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.
12
13	## Design guidance
14
15	Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). GPT is capable of extraordinary work. Don't hold back.
16
17	### General rules
18
19	#### Color
20
21	- Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
22	- Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.
23
24	#### Typography
25
26	- Cap body line length at 65–75ch.
27	- Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales.
28	- Cap font-family count at 3 (display + body + optional mono). More than 3 reads as indecision, not richness. One well-tuned family with weight contrast usually beats three competing typefaces.
29	- Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
30	- No all-caps body copy. Reserve uppercase fo

People who liked this also viewed

6 picks

Type

impeccable

30stars4forks

View on GitHub

How to install impeccable?

rafaelgorski/problem-based-srs/impeccable

$npx -y skills add RafaelGorski/Problem-Based-SRS --skill impeccable

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
2
3	## Setup
4
5	You MUST do these steps before proceeding:
6
7	1. Run `node .agents/skills/impeccable/scripts/context.mjs` once per session. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports `NO_PRODUCT_MD`, stop and follow `reference/init.md` before doing anything else. If the output ends with an `UPDATE_AVAILABLE` directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
8	2. If the user invoked a sub-command (`craft`, `shape`, `audit`, `polish`, ...), you MUST read `reference/<command>.md` next. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
9	3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
10	4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read `reference/brand.md`. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read `reference/product.md`. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) `register` field in PRODUCT.md.
11	5. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run `node .agents/skills/impeccable/scripts/palette.mjs` to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.
12
13	## Design guidance
14
15	Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). GPT is capable of extraordinary work. Don't hold back.
16
17	### General rules
18
19	#### Color
20
21	- Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
22	- Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.
23
24	#### Typography
25
26	- Cap body line length at 65–75ch.
27	- Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales.
28	- Cap font-family count at 3 (display + body + optional mono). More than 3 reads as indecision, not richness. One well-tuned family with weight contrast usually beats three competing typefaces.
29	- Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
30	- No all-caps body copy. Reserve uppercase fo

People who liked this also viewed

6 picks

Type