{"id":50139321,"url":"https://github.com/ctxr-dev/skill-frontend-excellence","last_synced_at":"2026-05-24T00:05:36.488Z","repository":{"id":357003283,"uuid":"1234906586","full_name":"ctxr-dev/skill-frontend-excellence","owner":"ctxr-dev","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-10T21:03:13.000Z","size":141,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-10T22:29:16.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctxr-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-10T19:45:46.000Z","updated_at":"2026-05-10T21:03:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ctxr-dev/skill-frontend-excellence","commit_stats":null,"previous_names":["ctxr-dev/skill-frontend-excellence"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ctxr-dev/skill-frontend-excellence","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxr-dev%2Fskill-frontend-excellence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxr-dev%2Fskill-frontend-excellence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxr-dev%2Fskill-frontend-excellence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxr-dev%2Fskill-frontend-excellence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctxr-dev","download_url":"https://codeload.github.com/ctxr-dev/skill-frontend-excellence/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxr-dev%2Fskill-frontend-excellence/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33416317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"ssl_error","status_checked_at":"2026-05-23T22:14:43.778Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-24T00:05:35.584Z","updated_at":"2026-05-24T00:05:36.466Z","avatar_url":"https://github.com/ctxr-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Excellence Skill (Claude Code, Codex CLI)\n\n[![npm](https://img.shields.io/npm/v/@ctxr/skill-frontend-excellence)](https://www.npmjs.com/package/@ctxr/skill-frontend-excellence)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Agent Skills](https://img.shields.io/badge/Agent%20Skills-Claude%20Code%20%7C%20Codex%20CLI-blue)](https://agentskills.io)\n\n\u003e Supports Claude Code and OpenAI Codex CLI via the open Agent Skills standard. Content-only Markdown: one entry point (`SKILL.md`) plus topical references under `references/`. No runtime, no scripts, no framework assumptions.\n\nA holistic, framework-agnostic playbook for shipping ultra-fast, accessible, search-friendly, visually distinctive web interfaces. Combines Lighthouse mastery, UI/UX patterns, design aesthetics, performance, accessibility, SEO, motion, forms, layout, data visualization, and a 19-phase multi-page audit workflow with widget standardization and geometry sweeps. Every rule is expressed as a principle plus a concrete check, never as a library API, so the guidance applies to vanilla HTML/CSS/JS, React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, SvelteKit, Remix, Qwik, Lit, and Web Components alike.\n\nThe skill encodes a single, opinionated bar (see [North Star Targets](#north-star-targets)). Treat any failure as a blocking defect, not a polish task.\n\n## Quick Start\n\n```bash\n# Install into your project\nnpx @ctxr/kit install @ctxr/skill-frontend-excellence\n```\n\nOpen the project in any Agent Skills-compatible harness. The skill auto-activates from its YAML frontmatter the moment a prompt touches how an interface looks, feels, moves, loads, ranks, or is interacted with. There is no slash command to invoke; the skill is content-only.\n\n## Prerequisites\n\n- An Agent Skills-compatible harness ([Claude Code](https://claude.ai/code) CLI/IDE, or OpenAI Codex CLI)\n- A project directory where you want the skill installed. Project-scope installs land at `.agents/skills/skill-frontend-excellence/`; user-scope installs (`--user`) land at `~/.agents/skills/skill-frontend-excellence/`. Discovery-mirror symlinks at `.claude/skills/` (and `~/.codex/skills/` at user scope) are created automatically so both harnesses find the skill without extra configuration.\n\n## Installation\n\n### Manual\n\n```bash\ngit clone https://github.com/ctxr-dev/skill-frontend-excellence.git /tmp/skill-frontend-excellence\nmkdir -p .agents/skills\ncp -r /tmp/skill-frontend-excellence .agents/skills/skill-frontend-excellence\n```\n\n### Git Submodule\n\n```bash\ngit submodule add https://github.com/ctxr-dev/skill-frontend-excellence.git \\\n    .agents/skills/skill-frontend-excellence\n```\n\nPins the skill at a specific commit; update explicitly via `git submodule update --remote`.\n\n## Usage\n\nAgent Skills-compatible harnesses (Claude Code, Codex CLI) surface this skill automatically based on the YAML frontmatter at the top of `SKILL.md`. The `description` field tells the host when to load it: any prompt that touches how an interface looks, feels, moves, loads, ranks, or is interacted with will trigger activation.\n\nWhen the skill is active, the host reads `SKILL.md` first (the entry point with the North Star Targets, priority stack, workflow, the Multi-Page Polish Loop, and the 35 highest-leverage rules), then loads only the topical reference under `references/` that matches the current work. There is nothing to invoke manually; install the skill and proceed with the task.\n\nFor the canonical entry point, read [`SKILL.md`](SKILL.md).\n\n## What's Inside\n\n| File | Use when |\n|------|---------|\n| [SKILL.md](SKILL.md) | Entry point. North Star Targets, priority stack, workflow, Multi-Page Polish Loop, the 35 highest-leverage rules, self-improvement checklist. |\n| [references/lighthouse.md](references/lighthouse.md) | Running a Lighthouse audit, interpreting scores, fixing failing audits, setting up CI gates. |\n| [references/performance.md](references/performance.md) | Optimizing assets, JS execution, hydration, render strategy, network, caching, fonts, images. |\n| [references/accessibility.md](references/accessibility.md) | WCAG 2.2 AA: semantic HTML, ARIA, keyboard, focus, screen reader, contrast, dynamic type, reduced motion. |\n| [references/seo.md](references/seo.md) | Meta tags, headings, structured data, canonicals, sitemaps, robots, internal linking, content quality. |\n| [references/ui-ux.md](references/ui-ux.md) | Touch targets, navigation, density, hover/press/focus states, hierarchy, empty/loading/error states. |\n| [references/design.md](references/design.md) | Typography, color, spacing, composition, atmosphere, dark/light parity, avoiding generic AI styling. |\n| [references/responsive.md](references/responsive.md) | Breakpoints, mobile-first, container queries, fluid typography, safe areas, viewport units. |\n| [references/motion.md](references/motion.md) | Timing, easing, principles, reduced-motion, transform-only animation, choreography. |\n| [references/forms.md](references/forms.md) | Validation, error placement, autofill, autosave, success/error states, multi-step flows. |\n| [references/data-viz.md](references/data-viz.md) | Chart selection, axes, legends, color, accessibility, large datasets. |\n| [references/pre-launch.md](references/pre-launch.md) | Final verification gate before declaring a page complete. |\n| [references/audit-workflow.md](references/audit-workflow.md) | Auditing or polishing an existing multi-page site against a reference; route-by-route capture, fix, and verify procedure. |\n| [references/components.md](references/components.md) | Standardizing repeated widgets, defining component contracts, detecting drift across pages. |\n| [references/defects.md](references/defects.md) | Symptom-to-fix lookup for common visible defects and the canonical programmatic geometry sweep. |\n\n## North Star Targets\n\nEvery interface should meet these bars before being considered \"done\". Treat any failure as a blocking defect, not a polish task.\n\n| Category | Mobile target | Desktop target | Source |\n|----------|--------------|----------------|--------|\n| Lighthouse Performance | \u003e= 95 | \u003e= 99 | Lighthouse |\n| Lighthouse Accessibility | 100 | 100 | Lighthouse + axe |\n| Lighthouse Best Practices | 100 | 100 | Lighthouse |\n| Lighthouse SEO | 100 | 100 | Lighthouse |\n| Largest Contentful Paint (LCP) | \u003c 2.5s | \u003c 2.0s | Core Web Vitals |\n| Interaction to Next Paint (INP) | \u003c 200ms | \u003c 200ms | Core Web Vitals |\n| Cumulative Layout Shift (CLS) | \u003c 0.1 | \u003c 0.05 | Core Web Vitals |\n| Time to First Byte (TTFB) | \u003c 800ms | \u003c 600ms | Core Web Vitals |\n| First Contentful Paint (FCP) | \u003c 1.8s | \u003c 1.0s | Lighthouse |\n| Total Blocking Time (TBT) | \u003c 200ms | \u003c 100ms | Lighthouse |\n| Initial JS payload (gzipped) | \u003c 90 KB | \u003c 130 KB | Budget |\n| Initial CSS payload (gzipped) | \u003c 25 KB | \u003c 35 KB | Budget |\n| Web font payload (per screen) | \u003c= 2 families, \u003c= 4 weights | same | Budget |\n\nThese are the universal bar. A given project may consciously relax a budget for a specific surface (e.g., a heavily interactive client-rendered tool that legitimately ships more JS), but the relaxation should be a recorded, justified exception, not a default.\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for local setup, editing conventions, and the strict style rules (framework-agnostic phrasing, generic placeholders, no em or en dashes).\n\n## Releasing\n\nReleases are PR-gated. Version bumps land on `main` through a review gate like any other change; only the tag push and npm publish are automated.\n\n1. **Actions, Release, Run workflow.** Branch selector: `main` (the workflow refuses any other ref). Version bump: `patch`, `minor`, or `major`.\n2. The workflow bumps `package.json` on a fresh `release/v\u003cversion\u003e` branch and opens a release PR.\n3. Review and merge the PR (the diff is just version fields).\n4. On merge, `tag-on-main.yml` detects the version change, creates the annotated `v\u003cversion\u003e` tag, and pushes it.\n5. The tag push triggers `publish.yml`, which runs validation, verifies tag/version agreement, and publishes to npm via OIDC trusted publishing.\n\nSee [GitHub Releases](https://github.com/ctxr-dev/skill-frontend-excellence/releases) for the changelog, and [CHANGELOG.md](CHANGELOG.md) for the in-repo history.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxr-dev%2Fskill-frontend-excellence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctxr-dev%2Fskill-frontend-excellence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxr-dev%2Fskill-frontend-excellence/lists"}