Reading time · 3 min

AI Skills

SHOPin ships project-specific agent skills — reusable instructions that encode the codebase's paths, conventions, and quality checks, so your AI pair adds components, BFF modules, integrations, and whole features the way this project expects. They live in the creativestyle/shopin-ai-tools repo and follow the open Agent Skills layout.

These are companions to the creativestyle/shopin accelerator. Installing them is optional and per-developer — the monorepo does not require them. Install them in your own checkout if they fit your workflow; the project works exactly the same either way.

Install

The skills CLI installs the skills into your project. Nothing to publish or install globally — npx runs it on demand:

Bash

# install all skills into the current project
npx skills add creativestyle/shopin-ai-tools

The CLI detects your agent and installs to the right place — .claude/skills/ for Claude Code, and .agents/skills/ for Cursor, Codex, GitHub Copilot, Gemini CLI, and ~70 others.

Install a single skill with the --skill flag:

Bash

npx skills add creativestyle/shopin-ai-tools --skill shopin-add-component

Other useful commands: skills list, skills update, and skills remove.

The skills

Skill	Use when	What it produces
`shopin-add-component`	Adding a UI component.	A React component with a Storybook story, unit test, and translations.
`shopin-add-bff-module`	Exposing a new API endpoint or domain through the BFF.	A NestJS module with contracts, controller, service, validation, and tests.
`shopin-add-integration`	Connecting a new external data source (e-commerce, CMS, payment, or other service).	A data source adapter that maps an external API onto the shared contract interfaces.
`shopin-add-feature`	Building a full-stack feature (e.g. wishlist, reviews, order tracking).	Frontend, BFF, contracts, and optionally integrations — a composite skill that leans on the other three.

In the repo, each skill is a self-contained folder under .agents/skills/<name>/ with a SKILL.md (domain guidance + an inlined process) and a references/ folder of examples to study before building. (Once installed, the skills CLI places them under your agent's skills folder — .claude/skills/ for Claude Code, .agents/skills/ for the rest.)

How the workflow works

Every skill inlines the same tiered process and scales it to the size and risk of the change — pick the lightest tier that fits, and escalate if scope grows mid-task.

Trivial

A rename, copy tweak, single prop, obvious one-liner, or following an existing pattern verbatim: just make the change and run the quality checks. No spec, plan, or approval gate.

Small / low-risk

A self-contained addition with a clear shape — most single-component work: post a short proposal (what, which files, acceptance criteria), get one approval, implement, then verify.

Non-trivial

Cross-cutting, ambiguous, many files, or real risk to existing behavior: use the full staged flow — Discover → Spec (approval) → Plan (approval) → Execute. Artifacts are saved under .agents/output/<skill-name>/.

When unsure, pick the lower tier and escalate if the change turns out bigger than it looked.

Source & reference

The creativestyle/shopin-ai-tools repo is the authoritative source. Each skill's SKILL.md is self-contained — including its discovery checklist, key paths, and conventions — and is kept in the repo so guidance never drifts from the tools themselves.