Menu
Create new Astro or Svelte components with correct patterns. Use proactively when creating new UI components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create blog posts — from a topic (writes content) or with provided content (scaffolding). Use proactively when creating new blog posts or articles.
Pre-publication audit for blog posts — comprehensive final review of SEO, AEO, accessibility, images, content quality, i18n parity, and project conventions before publishing. Use proactively before publishing any blog post.
Pre-publication audit for blog series — validates series definition, post ordering, cross-post consistency, navigation, and runs individual post audits for all posts in the series. Use proactively before publishing any blog series.
Audit the blog tag taxonomy — frequency analysis, orphan detection, hierarchy validation, and proposals for new subtopic tags. Read-only — proposes, never modifies tags or posts. Use proactively before each release cycle or after a content drop of 5+ posts.
Optional DeepWorkPlan addon that connects an AI-first repo to the developer's Dailybot team — installing (with consent) the Dailybot agent skill (DailybotHQ/agent-skill) and/or the Dailybot CLI (DailybotHQ/cli), wiring the plan lifecycle into best-effort agent updates - kickoff when a plan starts, significant task completions, a blocked report when an unattended run halts, and a milestone on plan completion - with payloads derived from the plan's state layer, and optionally committing the Dailybot skill's deterministic hook enforcement (dailybot hook lifecycle hooks, CLI >= 1.12.0) so the agent harness itself reminds agents about unreported work. Opt-in, never required, never blocks the work, reconciles existing setups instead of clobbering them, and defers all auth to the Dailybot skill's own consent flow. Use when the developer or team already uses Dailybot and wants DWP progress visible to humans.
Optional DeepWorkPlan addon that safely upgrades a repo's dependencies — reasoning about the repo's ACTUAL package manager (npm/pnpm/yarn + ncu, pip/poetry/uv, cargo, go mod, bundler, composer, and more) rather than assuming npm — with a batched, validated, revertible workflow that detects the manager and manifests/lockfiles, classifies upgrades (patch/minor/major), upgrades in safe batches, runs the repo's real validation gate after each batch, reverts a failing batch, and summarizes. Opt-in, never required, reconciles with the repo's existing tooling. Use when the developer wants to bring dependencies up to date without breaking the build.
| name | add-component |
| description | Create new Astro or Svelte components with correct patterns. Use proactively when creating new UI components. |
| disable-model-invocation | false |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
| model | haiku |
| tier | 1 |
| intent | create |
| max-files | 3 |
| max-loc | 150 |
Create new Astro (.astro) or Svelte (.svelte) components following project patterns. This skill guides the decision of which technology to use and where to place the component.
Tier: 1 - Light/Cheap
Reasoning: Creating a single component is mechanical, follows clear patterns, and has low risk. Decision tree for Astro vs Svelte is straightforward.
$NAME: Component name (PascalCase, e.g., UserCard)$PURPOSE: What the component does$LOCATION: Where to place (default: infer from purpose)$TYPE: Force astro or svelte (default: auto-select).astro) When:Examples: Footer.astro, BlogContainer.astro, HeroSection.astro
.svelte) When:Examples: Header.svelte, BlogSearchInput.svelte, MobileMenu.svelte
| Location | Purpose |
|---|---|
src/components/ | Standalone utilities |
src/components/blog/ | Blog-related components |
src/components/home/ | Homepage sections |
src/components/layout/ | Layout (Header, Menu) |
i18n Requirement: If the component displays user-visible text, it MUST accept a lang prop and use getTranslations(lang) for all text. Never hardcode user-visible strings directly in templates. If new translation keys are needed, add them to src/lib/translations.ts in BOTH English and Spanish.
Astro Template (with i18n):
---
import { getTranslations } from '@/lib/translations';
import type { Language } from '@/lib/translations';
interface Props {
lang: Language;
description?: string;
}
const { lang, description } = Astro.props;
const t = getTranslations(lang);
---
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">{t.section.title}</h2>
{description && <p class="text-gray-600 dark:text-gray-300">{description}</p>}
</div>
Svelte Template (with i18n):
<script lang="ts">
import { getTranslations } from '@/lib/translations';
export let lang: string = 'en';
export let onClick: (() => void) | undefined = undefined;
$: t = getTranslations(lang);
</script>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
on:click={onClick}
>
{t.section.buttonLabel}
</button>
Note: Components that only display props (no hardcoded text) do not need the lang prop or getTranslations().
pnpm run biome:check
pnpm run astro:check
## ✅ Component Created
### Component
- Name: {ComponentName}
- Type: {Astro|Svelte}
- Location: `src/components/{path}/{ComponentName}.{astro|svelte}`
### Features
- Props: {list of props}
- Dark mode: ✅
- TypeScript: ✅
### Usage
\`\`\`astro
---
import {ComponentName} from '@/components/{path}/{ComponentName}.{ext}';
---
<{ComponentName} {client:load if svelte} title="Example" />
\`\`\`
### Validation
- Biome: ✅
- Astro: ✅
### Commit Message
feat: add {ComponentName} component
dark: Tailwind classes)getTranslations(lang))translations.ts (if applicable)Stop and escalate if:
getTranslations() if text is displayed)lang prop if it displays textpnpm run biome:check passespnpm run astro:check passesInput:
$NAME: FeatureCard
$PURPOSE: Display a feature with icon and description
Result: Creates src/components/FeatureCard.astro
Input:
$NAME: ThemeButton
$PURPOSE: Toggle between light and dark mode
Result: Creates src/components/ThemeButton.svelte