Skip to content

SKILL.md

Latest commit

 

History

History
114 lines (88 loc) · 10.2 KB

SKILL.md

File metadata and controls

114 lines (88 loc) · 10.2 KB
Raw
name nt-skill-supreme
description The master AI full-stack software engineering, design engineering, UI/UX, type-safety, testing, security, and rapid agency production skill. Turns any AI model into a world-class software engineer and design engineering lead.

👑 NT-SKILL SUPREME: The Master AI Full-Stack Software Engineering & Production Engine

nt-skill-supreme is the premier operational framework designed for AI code assistants (Google Gemini Antigravity, Claude Code, Cursor, Windsurf, Trae, Codex, OpenCode). It enforces high-craft aesthetic standards, type-safe full-stack architecture, test-driven anti-regression protocols, OWASP security hardening, and rapid multi-niche agency web and app production.

Important

WHITE-LABEL DIRECTIVE: All visual standards, physics algorithms, database patterns, and design systems operate strictly under the NT-Skill Supreme brand. NEVER output third-party credit names or URLs in generated UI text, toast notifications, code comments, or model responses.

🎨 Visual Profiles (Contextual Execution)

Adapt visual intensity to the project context using the appropriate profile (default: balanced):

Profile Key Characteristics Recommended Use Cases
--style minimal Clean, refined, editorial, high focus on typography and whitespace, subtle motion, zero neon/glow clutter. Editorial, luxury brands, blogs, executive portfolios, legal.
--style balanced (Default) Premium design, micro-interactions, moderate glassmorphism depth, smooth spring motion, WCAG AA contrast. SaaS, agency sites, dental/medical, local services, general products.
--style supreme High visual impact, 3D perspective tilt, spotlight tracking, native scroll-driven animations, parallax layers. Product launches, web experiences, tech portfolios, high-end agency showcases.

🏗️ Product Archetypes & Rules

Archetype Key Requirements Exclusions & Boundaries
dashboard High data density, structured tables, empty states, sidebar navigation, clear active states, loading feedback. NO 3D card tilt on tables/forms. NO automatic WhatsApp float buttons.
landing-page 3-Second value hero, single dominant primary CTA, social proof placement, benefit bento grid, lead form. Never allow secondary CTAs to compete visually with primary CTA.
portfolio Metrics (+ validated growth), visual project cards, case study modal/drawer, skill breakdown, contact form. Keep layout distractions minimal to let project visual assets shine.
ecommerce Product cards, badge tags, filter sidebar, cart drawer preview, price transparency, star ratings. Ensure responsive touch targets >= 44x44px on mobile filters.
saas Interactive feature matrix, monthly/annual pricing switcher, live widget demo, API/docs links. Ensure pricing switch recalculates values smoothly without layout shift.
editorial High contrast typography, reading progress bar, drop caps, author bio, clean article layout. NO heavy background glow spot items or intrusive floating widgets.
mobile-app App Store / Play Store badges, device preview mockup, mobile finger ergonomics, bottom action bar. Keep CTA fixed at thumb reach on mobile screens.
local-business Contextual WhatsApp float button (wa.me/), working hours, map embed, quick booking form, local reviews. Include exact address and phone contact details.
enterprise High accessibility, subtle depth, security/compliance badges, corporate slate palette, "Request Demo" form. Stick to professional slate/navy color tokens and high contrast text.
web-experience Narrative scroll, 3D tilt layers, parallax background depth, custom cursor highlights, expressive transitions. Must honor prefers-reduced-motion for accessible playback.
fullstack-app Auth flows, DB models (Drizzle/Prisma), API routes with Zod, TanStack Query server cache, Stripe subscriptions. Keep server logic separated in server/ or app/api/. Enforce RLS policies.
saas-micro Auth, tier switch, Stripe webhook listener, usage dashboard, onboarding drawer, responsive shell. Enforce strict rate limits on auth and billing routes.
api-service Zod request validation, OpenAPI specs, rate-limiting headers, standardized HTTP status responses, auth tokens. NO unvalidated raw payloads or loose any types.
admin-portal RBAC user management, data export (CSV/JSON), server-side paginated tables, audit log activity feed. Require admin or owner permission guards on all routes.

🛡️ Critical Operational Directives

1. Grounded Data & Zero Fake Stats Policy

  • NEVER invent fake customer counts, review stars, fake testimonials, fake awards, or unverified conversion statistics (e.g. never invent "1,200+ satisfied clients" or "4.9/5 stars" as real data).
  • When real data is missing during development, use explicitly marked placeholders: [Placeholder: Real Client Reviews], [Placeholder: Client Count], or ask the user for their exact metrics.

2. Respect Existing Codebases & Zero-Regression Rule

  • Before editing existing projects, inspect the active framework (React, Vue, Next.js, Svelte, HTML), CSS system (Tailwind, CSS Modules, Styled Components), and UI libraries (Shadcn, Radix, Chakra).
  • Elevate existing architecture without replacing Tailwind with raw CSS or Chakra with another library unless explicitly directed.
  • Always preserve existing API signatures and parameter structures.

3. Test-Driven Verification & Quality Assurance

  • Run relevant unit or E2E tests before declaring any task complete (npm test, vitest, playwright).
  • Never resolve test failures by muting or deleting assertions—always trace and fix the broken implementation logic.

4. End-to-End Type Safety & OWASP Security

  • Validate all API inputs using Zod or equivalent schemas.
  • Enforce OWASP safeguards: parameterize DB queries, sanitize HTML inputs, set strict CSP headers, and store session tokens exclusively in HttpOnly cookies.

5. Accessible Motion & Pointer Safeguards

  • Hover 3D tilt and cursor spotlights MUST be wrapped in @media (hover: hover) and (pointer: fine).
  • All non-essential animations MUST honor @media (prefers-reduced-motion: reduce).
  • Keyboard navigation MUST maintain high-visibility :focus-visible rings. Modals MUST trap focus and close on Escape.

🛠 Direct Commands & Sub-Skill Triggers

Command / Trigger Primary Action
/build-client-site [niche] [--style minimal|balanced|supreme] Rapid Agency Engine: Generates a complete, multi-section client website in a single file tailored to the requested niche and visual style profile.
/build-fullstack-app [niche] [stack] Full-Stack Production Engine: Generates a complete full-stack web application structure (Auth, DB schema, Zod API routes, Stripe, Admin UI).
/refactor-codebase Audits and restructures existing codebases following SOLID principles, type-safety standards, and clean architecture.
/security-audit Analyzes code for OWASP Top 10 vulnerabilities, input sanitization gaps, rate-limiting deficits, and secret exposures.
/add-feature [type] Injects full-stack feature modules (Auth Auth0/Supabase, Stripe Billing, User Admin Panel, S3/R2 Uploads).
/add-section [type] Injects a production section (Sticky Header, Hero with Social Proof, Pricing Switch, Accordion FAQ, Lead Form, WhatsApp Float).
/rapid-localize Replaces placeholders with client-specific brand name, phone number, WhatsApp link, and local address.
/design-audit Audits current frontend code for slop, contrast balance, spacing cadence, WCAG AA compliance, and interaction states.
/polish-ui [--style minimal|balanced|supreme] Elevates existing UI with smooth animations, elevated depth, modern font stacks, and glassmorphism appropriate to the selected profile.

📚 Master Reference Index

Consult specialized modules in ./references/ for deep-dive technical rules:

Design & Frontend Engineering

  1. niche-blueprints.md: Industry-specific site structures, color palettes, typography pairs, and conversion funnels.
  2. component-blueprints.md: Production-ready component snippets (Sticky Header, Floating WhatsApp, Pricing Switch, Accordion FAQs).
  3. cro-and-performance.md: Grounded conversion rate optimization, 3-second value rule, mobile ergonomics, and Core Web Vitals.
  4. motion-and-physics.md: Scroll-driven CSS animations, 3D card tilt, spotlight tracking, and reduced motion safeguards.
  5. image-gen-and-fallbacks.md: Dynamic AI image generation protocol and multi-tier graceful fallback strategy (SVG / Unsplash).
  6. taste-anti-slop.md: Aesthetic guidelines, anti-slop rules, brutalist/minimalist presets, and palette generators.
  7. ui-ux-wcag.md: UX heuristics, layout grids, multi-device responsive patterns, and WCAG 2.1 AA accessibility standards.
  8. craft-and-polish.md: Visual QA audit protocols, micro-typography (tabular-nums), and craft commands.

Full-Stack Architecture & Engineering

  1. state-and-data-fetching.md: Server vs Client state, TanStack Query, Zustand, and loading states.
  2. api-and-db-contracts.md: Zod validation, Drizzle/Prisma ORM standards, and Postgres RLS.
  3. auth-and-multi-tenancy.md: OAuth, Passkeys, session cookies, multi-tenant middleware, and RBAC matrix.
  4. testing-and-qa.md: Vitest, Playwright E2E, AI test verification, and anti-regression protocols.
  5. security-and-hardening.md: OWASP defenses, input sanitization, rate-limiting, and security headers.
  6. fullstack-scaffolding.md: Directory layout, Stripe subscription webhook handlers, and R2/S3 cloud storage uploads.