Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add internet-development/nextjs-css-agent-components --skill export-component-to-other-repogit clone --depth 1 https://github.com/internet-development/nextjs-css-agent-componentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/internet-development/nextjs-css-agent-components/export-component-to-other-repo)<a href="https://agentmods.dev/skills/internet-development/nextjs-css-agent-components/export-component-to-other-repo"><img src="https://agentmods.dev/badge/skills/internet-development/nextjs-css-agent-components/export-component-to-other-repo/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/internet-development/nextjs-css-agent-components/export-component-to-other-repo"><img src="https://agentmods.dev/badge/skills/internet-development/nextjs-css-agent-components/export-component-to-other-repo.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00106 | $0.04756 |
| Opus 5 | $0.00053 | $0.02378 |
| Sonnet 5 | $0.00021 | $0.00951 |
| Haiku 4.5 | $0.00011 | $0.00476 |
Grade A, and why
export-component-to-other-repo scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 239 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Export a component to another repo
This skill exports a component (or a set of components) from nextjs-css-agent-components into a target repo while preserving every value that makes it look right: pixel measurements, type tokens, theme variables, transition timing, breakpoint, and z-index. The starter is a precision wireframe system — paraphrasing values is the failure mode this skill exists to prevent.
Heads-up on styling: SASS is not a dependency. All styling is vanilla CSS Modules (.module.css) using native CSS nesting (the & selector). Next.js compiles this via Lightning CSS with no preprocessor or PostCSS plugins. Don't introduce a SASS dependency in the target. (The package was previously named nextjs-sass-starter; ignore that name if you encounter it in old links or forks.)
When to use
- "Copy
<Component>into<other-repo>" - "Bring the Thin layout / Button / Input / Navigation / Footer over to
<repo>" - "Port the modal system into
<repo>" - "Lift the typography scale into
<repo>"
When NOT to use
- The user wants a redesign of the component for the new repo. (Use a normal task; this skill preserves, it doesn't reinterpret.)
- The user wants to publish a shared package. (That is a different procedure — this skill copies source.)
- The target repo already uses Tailwind / styled-components / Emotion. Stop and ask the user how they want the styling reconciled before continuing.
Pre-flight: profile the source
Before touching the target repo, build a manifest of what the component actually depends on. For each component you are exporting:
- Read the
.tsxand.module.csstogether. They are colocated in this repo and must move together. - List the imports. Anything from
@elements,@components,@patterns,@runtime,@common,@root,@modulesis a transitive dependency that has to either come along or be re-pointed. Note the tier of each — Tier-1 (@elements/) deps are usually free to copy, Tier-2 (@components/) deps pull in their own atoms, Tier-3 (@patterns/) deps are page-level and rarely worth porting on their own. - Grep the CSS for
var(--...). Every--theme-*,--color-*,--type-scale-*,--font-family*,--theme-graph-*,--theme-box-shadow-*token referenced is a global it depends on. Note all of them. - Grep the CSS for
@media,transition:,animation:,@keyframes,100dvh, and&(native nesting). These are the precision-sensitive surfaces. If the target's CSS pipeline doesn't support native nesting, you'll have to flatten&:hover { ... }into.foo:hover { ... }. - Note the spacing values used (
24,48,64,4,8,12,16,32) and any radii (4px,8px). - Check for body/document assumptions — does the component assume
body.theme-lightexists? Does it usedocument.body.classList(e.g. theme switcher)? Does it require a React context (modals, providers)?
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 239 lines · 106 tokens per session scan A d41752548f8d
export-component-to-other-repo is a skill published in the GitHub repository internet-development/nextjs-css-agent-components (217 stars, last pushed 21d ago), licensed MIT. It adds 106 tokens to every session and 4,756 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.
kiranism-shadcn-dashboard
Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…
favicon-icon-generator
Generate and validate favicon and application icon systems for web projects. Use when creating SVG icons, web manifests, framework metadata, or cross-platform favicon assets.