القائمة
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