← All skills
frontend
75 / 100 · Review before installing
Check before installing.
By HyunjunJeon/fastcampus-harness-engineering-course (GitHub) · design · 21 stars · scanned at commit c7090e6
MUST USE for ANY frontend, web UI, UX, or visual work — building, styling, or redesigning pages/components, React project setup, performance audits, design QA. Routes three rulesets: design (anti-slop taste router over 12 taste skills + 69 brand DESIGN.md refs — Apple, Stripe, Linear, Notion, Vercel, Claude, Nike — plus React dev tooling gate: react-grab, react-scan, react-doctor), perfection (Lighthouse 100 in every category via real Playwright Chromium audits, NEVER the lighthouse CLI, never …
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
The author does not mention this.
Found in 5 places.
Show 2 more
Downloads and installs other software
The author does not mention this.
Found in 23 places.
Show 17 more
- part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 11
| **react-doctor** | Static scanner that finds bad React patterns across state & effects, perf, architecture, security, a11y. One-shot `npx react-doctor@latest` - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 21
npx grab@latest init - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 24
npx react-doctor@latest install - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 27
npx react-scan@latest init - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 149
npx react-doctor@latest install - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 158
npx react-doctor@latest - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 161
npx react-doctor@latest --json > .react-doctor-report.json - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/perfection/README.md, line 77
- **`react-doctor`** (static): cheapest. `npx react-doctor@latest --json` before any browser audit. Treat perf-category findings as audit failures. - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 8
| **react-doctor** | Static scan, CI-friendly | Deterministic findings across state/effects, perf (memoization, list keys, expensive children), architecture, se - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 75
npx react-doctor@latest --json > .react-doctor-report.json - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 91
run: npx react-doctor@latest --json --fail-on perf - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 99
2. **`react-scan` interactive in dev** — load the page in real Chrome with `npx react-scan@latest init` already wired (see the dev-tooling reference). Walk the - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/astro.csv, line 18
17,Styling,Integrate Tailwind properly,Use @astrojs/tailwind integration,Official Tailwind integration,Manual Tailwind setup,npx astro add tailwind,Manual PostC - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/astro.csv, line 34
33,SEO,Generate sitemap,Automatic sitemap generation,@astrojs/sitemap integration,Manual sitemap maintenance,npx astro add sitemap,Hand-written sitemap.xml,Medi - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/astro.csv, line 37
36,Integrations,Use official integrations,Astro's integration system,npx astro add for integrations,Manual configuration,npx astro add react,Manual React setup, - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/astro.csv, line 54
53,Build,Use prefetch,Preload linked pages,prefetch integration,No prefetch for navigation,npx astro add prefetch,Manual prefetch,Low,https://docs.astro.build/e - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/shadcn.csv, line 2
1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@
and 3 more places
Sends data to these websites: docs.astro.build, nextjs.org, nuxt.com, kit.svelte.dev
The author does not mention this.
Found in 12 places.
Show 9 more
- part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/react-performance.csv, line 17
16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/astro.csv, line 20
19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),clie - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/nextjs.csv, line 13
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for ini - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/nextjs.csv, line 14
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/nuxtjs.csv, line 10
9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,"const { data } = a - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/nuxtjs.csv, line 12
11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in clic - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/nuxtjs.csv, line 30
29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await cal - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/react.csv, line 41
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {} - part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend/references/ui-ux-db/data/stacks/svelte.csv, line 45
44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Med
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Other copies in this repository
HyunjunJeon/fastcampus-harness-engineering-course has 1 more folder with a skill named frontend. This page shows the lowest-scoring copy.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'frontend' ] || [ -L ~/.agents/skills/'frontend' ]; then echo 'A skill folder named frontend already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/HyunjunJeon/fastcampus-harness-engineering-course' "$d" && git -C "$d" checkout --quiet 'c7090e63259ecb5d2bd84f2751cb44e0876becc2' -- 'part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend' && mkdir -p ~/.agents/skills && cp -R "$d"/'part7_opensource/oh-my-openagent/packages/shared-skills/skills/frontend' ~/.agents/skills/'frontend' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'frontend' ~/.claude/skills/'frontend' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for HyunjunJeon/fastcampus-harness-engineering-course shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/HyunjunJeon/fastcampus-harness-engineering-course/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | c7090e6 | 75 |