메뉴
Design system foundation. Colors, typography, spacing. Single source of truth. No raw values.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Canonical lead-gen tracking for Astro.js on Cloudflare Workers (v6, Run 6 contract). Drop-in components: <Tracking/>, <TrackedForm/>, <PhoneLink/>, <CallbackButton/>. Two channels with a SHARED event_id: browser (GTM → GA4 / Meta Pixel / Google Ads) + server-side via the Soborbo event-gateway worker. Model 2: the browser OWNS on-site GA4 + Google Ads; the server sends Meta CAPI on-site (+ TikTok/LinkedIn/Microsoft click-ID forwarders, event_id-deduped) and Google Ads ONLY offline (CRM lead lifecycle, Google Data Manager API); the server sends NO GA4. Two gateway ingress paths: tokenless browser path for low-risk clicks (Origin allow-list + rate limit), authenticated server path (per-site token, service binding) for form/lead/purchase conversions dispatched by the site BACKEND. No Turnstile. Daily synthetic smoke-lead cron + digest guard. Consent Mode v2 + CookieYes, gclid/gbraid/wbraid/fbclid + full UTM capture, calculator funnel, form abandonment, phone dedup, first/last touch attribution. Bilingual / multi-
DEPRECATED (legacy, in old/) — use the `soborbo-tracking` skill instead for GA4 + Meta + Google Ads tracking on Astro. Kept for reference only.
Audit and strengthen visible E-E-A-T signals and AI-search (GEO) readiness on Astro lead-gen sites. Use when a page or site needs Experience/Expertise/Authoritativeness/Trust signals, author credibility, first-hand-experience proof, trust pages (about/contact/privacy/returns), NAP + company registration display, review/trust-mark surfacing, AI-crawler access in robots.txt, or answer-first content for ChatGPT/Gemini/Perplexity/AI Overviews. Also triggers on "EEAT", "E-E-A-T", "GEO", "AEO", "AI search visibility", "get cited by AI", "trust signals", "author bio", "local trust", or making a small/niche business outrank larger competitors. Runs a deterministic auditor with runnable tests. Delegates JSON-LD generation to schema-entity-graph and JSON-LD validation to schema-audit; delegates copy voice to humanise-copy.
Width-based responsive image patterns for Astro. Local build-time processing, per-format quality (AVIF/WebP/JPG/PNG), alpha-aware fallback, art direction, face-focus, OG generation, image SEO. Picture, ArtPicture, FixedImage components.
Per-site client tracker and Astro endpoint for the centralised soborbo-error-pipeline workers. Captures client JS errors via sendBeacon, forwards via console.error → Tail Worker. Server-side uncaught exceptions are captured automatically. ~1.5KB client bundle, no external deps. Email throttled to 1 per (site, code) per 4 hours by the notifier worker.
Form infrastructure for Astro projects. Contact forms, booking forms, quote requests. Zod validation, email delivery (Resend/Brevo), rate limiting, Google Sheets, postcode lookup, spam protection.
| name | design-tokens |
| description | Design system foundation. Colors, typography, spacing. Single source of truth. No raw values. |
One config. Consistent design. Zero guessing.
Foundation layer for all UI. Every visual property comes from here.
tokens_generated: true
tailwind_config: "tailwind.config.mjs"
css_variables: "src/styles/tokens.css"
design_token_verdict: PASS | WARN | FAIL
This skill is the ONLY source for visual tokens. All UI skills consume from here. No local overrides.
Cross-references:
section-skeleton → uses spacing/colorsastro-components → uses all tokensfrontend-design → uses all tokens| Type | Tokens | Usage |
|---|---|---|
| Semantic | primary-*, accent, neutral-* | Use in components |
| Utility | spacing.*, font-*, shadow-* | Internal mapping only |
Rule: Components use semantic tokens. Utility for internal only.
| Token | Allowed | Forbidden |
|---|---|---|
accent | CTAs, links, highlights | Body text, backgrounds |
primary-900 | Headlines, body text | Buttons |
primary-100 | Section backgrounds | Text |
neutral-200 | Borders, dividers | CTAs |
Wrong scope = WARN.
| Type | Forbidden | Use Instead |
|---|---|---|
| Colors | #FF6B35, rgb() | bg-accent, text-primary-900 |
| Spacing | mt-[23px] | mt-6 |
| Font sizes | text-[18px] | text-lg |
| Shadows | shadow-[...] | shadow-card |
| Radius | rounded-[12px] | rounded-lg |
Any raw value in component = FAIL.
| Combination | Min Ratio | Standard |
|---|---|---|
| Body text on white | 4.5:1 | AA |
| Body text on primary-100 | 4.5:1 | AA |
| Large text (≥18px) | 3:1 | AA |
| CTA text on accent | 4.5:1 | AA |
| UI components | 3:1 | AA |
Contrast fail = FAIL.
| Color | Tokens | Purpose |
|---|---|---|
| Primary | 50-950 scale | Brand, text, backgrounds |
| Accent | DEFAULT, hover, light | CTAs, links |
| Neutral | 50-900 scale | Borders, backgrounds |
| Semantic | success, error, warning | Feedback |
| Token | Use For |
|---|---|
primary-900 | Headlines, body |
primary-700 | Secondary text |
primary-100 | Light section bg |
accent | CTAs, links |
accent-hover | Button hover |
| Token | Range | Use |
|---|---|---|
text-base | 16-18px | Body |
text-lg | 18-20px | Lead |
text-2xl | 24-32px | H3 |
text-3xl | 30-40px | H2 |
text-4xl/5xl | 36-64px | H1 |
Font: Inter → system-ui → sans-serif
| Token | Value | Use |
|---|---|---|
py-12 md:py-20 | 48/80px | Section padding Y |
px-4 md:px-8 | 16/32px | Section padding X |
gap-6 md:gap-8 | 24/32px | Component gap |
p-4 md:p-6 | 16/24px | Card padding |
design_token_verdict: PASS | WARN | FAIL
issues: []
| Condition | Verdict |
|---|---|
| Raw value in component | FAIL |
| Contrast fail | FAIL |
| Missing required token | FAIL |
| Wrong token scope | WARN |
| Missing shade in scale | WARN |
| All rules pass | PASS |
| Condition |
|---|
| Hardcoded hex in component |
Arbitrary spacing [Xpx] |
| Contrast ratio below AA |
| Missing primary scale |
| Missing accent colors |
| Condition |
|---|
| Token used in wrong scope |
| Missing optional shades |
| Non-standard font loaded |
brand_intake:
primary_color: "#XXXXXX"
accent_color: "#XXXXXX"
font: Inter | Poppins | System
style: Modern | Classic | Playful
industry: removals | cleaning | trades | legal
tailwind.config.mjs generatedtokens.css with CSS variables