Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui.
Install Frontend
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontend --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/frontend .claude/skills/frontend && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .claude/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontendType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontend --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/frontend .agents/skills/frontend && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .agents/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontend --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/frontend .cursor/skills/frontend && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .cursor/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AlexPEClub/ai-coding-starter-kit.git --path .claude/skills/frontend--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontend --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/frontend .gemini/skills/frontend && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .gemini/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontendInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/frontend .github/skills/frontend && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .github/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AlexPEClub/ai-coding-starter-kit frontend --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AlexPEClub/ai-coding-starter-kit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/frontend .opencode/skills/frontend && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/AlexPEClub/ai-coding-starter-kit/tree/main/.claude/skills/frontend into .opencode/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend- GitHub stars
- 382
- Token cost
- ~930 tokens
- SKILL.md length
- 472 words
- Files
- 2
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- None found
At a glance
Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui.
- Works in 6 steps: Read Feature Spec + Design → Clarify Design Requirements → Clarify Technical Questions → …
- Tasks that involve Design systems
- SKILL.md covers Role, Before Starting, Workflow and Context Recovery, plus 3 more sections
- Calls git and npx
What it does
Frontend is an agent skill from AlexPEClub/ai-coding-starter-kit. Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui. Use after architecture is designed.
Its SKILL.md is about 930 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `checklist.md`).
It sits in Frontend & Design, covering Design systems. It works with shadcn/ui, Tailwind CSS, Next.js and React. The repository describes itself as: Production-ready Next.js template with AI-powered development workflow using 6 specialized agents.
When your agent uses it
- Tasks that involve Design systems
Example prompts
- “/frontend”
Requirements
- Node.js
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- Read Feature Spec + Design
- Clarify Design Requirements
- Clarify Technical Questions
- Implement Components
- Integrate into Pages
- User Review
What it can do on your machine
Read from SKILL.md and the folder at commit 21a97bb. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
gitnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend loads about 930 tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 472 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 472 words (~930 tokens).
“You are an experienced Frontend Developer. You read feature specs + tech design and implement the UI using React, Next.js, Tailwind CSS, and shadcn/ui.”
- name
- frontend
- argument-hint
- feature-spec-path
- user-invocable
- true
Files
SKILL.md and 1 other file in .claude/skills/frontend of AlexPEClub/ai-coding-starter-kit.
- SKILL.md
- checklist.md
Open the folder on GitHubat commit 21a97bb
Compare with similar skills
Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend this skillAlexPEClub/ai-coding-starter-kit | 382 | — | ~930 | Automated safety check: Pass | None | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Ss Learnbitjaru/styleseed | 973 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Nextjs Nextra Starter Distillpdsuwwz/nextjs-nextra-starter | 318 | — | ~596 | Automated safety check: Pass | MIT | |
| Styleseedbitjaru/styleseed | 973 | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
Nextjs Nextra Starter Distill
pdsuwwz/nextjs-nextra-starter
Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.
Styleseed
bitjaru/styleseed
Build, improve, or inspect UI with StyleSeed. An agent skill from bitjaru/styleseed.
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
More from AlexPEClub/ai-coding-starter-kit
All 8 skills in this repoInit
AlexPEClub/ai-coding-starter-kit
Initialize a new project. An agent skill from AlexPEClub/ai-coding-starter-kit.
Refine
AlexPEClub/ai-coding-starter-kit
Always use when the user wants to discuss an exsiting feature or specification.
Architecture
AlexPEClub/ai-coding-starter-kit
Design PM-friendly technical architecture for features. An agent skill from AlexPEClub/ai-coding-starter-kit.
Backend
AlexPEClub/ai-coding-starter-kit
Build APIs, database schemas, and server-side logic with Supabase.
Deploy
AlexPEClub/ai-coding-starter-kit
Deploy to Vercel with production-ready checks, error tracking, and security headers setup.
Write Spec
AlexPEClub/ai-coding-starter-kit
Write a full feature spec for a feature. An agent skill from AlexPEClub/ai-coding-starter-kit.
Related
Works with
Categories
Questions about Frontend
What does Frontend do?
Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui. Frontend is an agent skill from AlexPEClub/ai-coding-starter-kit.js, Tailwind CSS, and shadcn/ui.
When should I use Frontend?
Frontend fits situations like: tasks that involve Design systems.
How do I install Frontend in Claude Code?
Run `npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a claude-code`. Or copy the skill folder (.claude/skills/frontend in AlexPEClub/ai-coding-starter-kit) into .claude/skills/frontend in your project. Claude Code loads it when a task matches its description.
How do I install Frontend in Codex?
Run `npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a codex`. Or copy the skill folder (.claude/skills/frontend in AlexPEClub/ai-coding-starter-kit) into .agents/skills/frontend in your project. Codex loads it when a task matches its description.
Can I use Frontend in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AlexPEClub/ai-coding-starter-kit --skill frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend, .gemini/skills/frontend, .github/skills/frontend and .opencode/skills/frontend in your project.
What does Frontend need to run?
Going by SKILL.md and its folder, Frontend needs the command-line tools its instructions call (git and npx). Our summary lists: Node.js.
Does Frontend access the network?
SKILL.md contains no URLs. Its commands use git and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Frontend safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend use?
No licence was found for Frontend or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Frontend use?
About 930 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend?
Skills that share tags, products or a category with Frontend: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Coss (crafter-station/petdex, 4.2k stars), Ss Learn (bitjaru/styleseed, 973 stars) and Nextjs Nextra Starter Distill (pdsuwwz/nextjs-nextra-starter, 318 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend?
AlexPEClub (a GitHub user) maintains it in AlexPEClub/ai-coding-starter-kit, which has 382 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on June 3, 2026.
Source: AlexPEClub/ai-coding-starter-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.