From agent-skills
Grounds framework implementations in official docs: detects stack/versions from dependency files, fetches specific pages, implements patterns, cites sources. Use for accurate, current code.
npx claudepluginhub addyosmani/agent-skills --plugin agent-skillsThis skill uses the workspace's default tool permissions.
Every framework-specific code decision must be backed by official documentation. Don't implement from memory — verify, cite, and let the user see your sources. Training data goes stale, APIs get deprecated, best practices evolve. This skill ensures the user gets code they can trust because every pattern traces back to an authoritative source they can check.
Enforces Detect → Fetch → Implement → Cite protocol for non-trivial changes (≥5 LOC) touching external framework APIs, using current official docs over stale recall.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Fetches up-to-date Context7 documentation for libraries, frameworks, APIs, code examples when queries involve implementation, setup, docs, or mentions like React, Next.js, Prisma.
Share bugs, ideas, or general feedback.
Every framework-specific code decision must be backed by official documentation. Don't implement from memory — verify, cite, and let the user see your sources. Training data goes stale, APIs get deprecated, best practices evolve. This skill ensures the user gets code they can trust because every pattern traces back to an authoritative source they can check.
When NOT to use:
DETECT ──→ FETCH ──→ IMPLEMENT ──→ CITE
│ │ │ │
▼ ▼ ▼ ▼
What Get the Follow the Show your
stack? relevant documented sources
docs patterns
Read the project's dependency file to identify exact versions:
package.json → Node/React/Vue/Angular/Svelte
composer.json → PHP/Symfony/Laravel
requirements.txt / pyproject.toml → Python/Django/Flask
go.mod → Go
Cargo.toml → Rust
Gemfile → Ruby/Rails
State what you found explicitly:
STACK DETECTED:
- React 19.1.0 (from package.json)
- Vite 6.2.0
- Tailwind CSS 4.0.3
→ Fetching official docs for the relevant patterns.
If versions are missing or ambiguous, ask the user. Don't guess — the version determines which patterns are correct.
Fetch the specific documentation page for the feature you're implementing. Not the homepage, not the full docs — the relevant page.
Source hierarchy (in order of authority):
| Priority | Source | Example |
|---|---|---|
| 1 | Official documentation | react.dev, docs.djangoproject.com, symfony.com/doc |
| 2 | Official blog / changelog | react.dev/blog, nextjs.org/blog |
| 3 | Web standards references | MDN, web.dev, html.spec.whatwg.org |
| 4 | Browser/runtime compatibility | caniuse.com, node.green |
Not authoritative — never cite as primary sources:
Be precise with what you fetch:
BAD: Fetch the React homepage
GOOD: Fetch react.dev/reference/react/useActionState
BAD: Search "django authentication best practices"
GOOD: Fetch docs.djangoproject.com/en/6.0/topics/auth/
After fetching, extract the key patterns and note any deprecation warnings or migration guidance.
When official sources conflict with each other (e.g. a migration guide contradicts the API reference), surface the discrepancy to the user and verify which pattern actually works against the detected version.
Write code that matches what the documentation shows:
When docs conflict with existing project code:
CONFLICT DETECTED:
The existing codebase uses useState for form loading state,
but React 19 docs recommend useActionState for this pattern.
(Source: react.dev/reference/react/useActionState)
Options:
A) Use the modern pattern (useActionState) — consistent with current docs
B) Match existing code (useState) — consistent with codebase
→ Which approach do you prefer?
Surface the conflict. Don't silently pick one.
Every framework-specific pattern gets a citation. The user must be able to verify every decision.
In code comments:
// React 19 form handling with useActionState
// Source: https://react.dev/reference/react/useActionState#usage
const [state, formAction, isPending] = useActionState(submitOrder, initialState);
In conversation:
I'm using useActionState instead of manual useState for the
form submission state. React 19 replaced the manual
isPending/setIsPending pattern with this hook.
Source: https://react.dev/blog/2024/12/05/react-19#actions
"useTransition now supports async functions [...] to handle
pending states automatically"
Citation rules:
/useActionState#usage over /useActionState) — anchors survive doc restructuring better than top-level pagesUNVERIFIED: I could not find official documentation for this
pattern. This is based on training data and may be outdated.
Verify before using in production.
Honesty about what you couldn't verify is more valuable than false confidence.
| Rationalization | Reality |
|---|---|
| "I'm confident about this API" | Confidence is not evidence. Training data contains outdated patterns that look correct but break against current versions. Verify. |
| "Fetching docs wastes tokens" | Hallucinating an API wastes more. The user debugs for an hour, then discovers the function signature changed. One fetch prevents hours of rework. |
| "The docs won't have what I need" | If the docs don't cover it, that's valuable information — the pattern may not be officially recommended. |
| "I'll just mention it might be outdated" | A disclaimer doesn't help. Either verify and cite, or clearly flag it as unverified. Hedging is the worst option. |
| "This is a simple task, no need to check" | Simple tasks with wrong patterns become templates. The user copies your deprecated form handler into ten components before discovering the modern approach exists. |
package.json / dependency files before implementingAfter implementing with source-driven development: