skills.rest
joaquinvaldezzz
joaquinvaldezzzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

joaquin-valdez-frontend-design

Applies the Technical Workshop design system to pages, components, and styling for joaquinvaldez.me.

Updated Sep 10, 2026
Search Tags:#typography#accessibility#design system#next.js#tailwind css#portfolio#ui components
One-click install
npx skills add https://github.com/joaquinvaldezzz/joaquin-valdez-design --skill joaquin-valdez-frontend-design-joaquinvaldezzz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: joaquin-valdez-frontend-design
Source: https://github.com/joaquinvaldezzz/joaquin-valdez-design
Command: npx skills add https://github.com/joaquinvaldezzz/joaquin-valdez-design --skill joaquin-valdez-frontend-design-joaquinvaldezzz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Maintaining visual and architectural consistency across a personal portfolio site is difficult when UI requests arrive casually or without explicit design-system references. This Skill encodes the complete "Technical Workshop / Hardware Workbench" design language for joaquinvaldez.me so every page, card, badge, and layout follows the same typography tokens, container disciplines, and accessibility rules. ## Core Features & Use Cases - Typography & Token Enforcement: Applies the pixel/mono/sans font matrix, Heading primitive defaults, register codes (e.g. Vault // 01), and the mandatory Tailwind uppercase class rule for accessible casing. - Component Standards: Provides ready patterns for Base UI cards, flush image banners, back-navigation buttons, full-card click overlays, status beacons, telemetry metric strips, archive tables, diagnostic placards, and the SYS // CONNECT endcap. - Layout & Motion Discipline: Defines Container sizes (prose/default/wide), responsive grid breakpoints, grayscale-to-color image transitions, z-index layering, and motion-reduce accessibility variants. - Use Case: When asked to "add a new section to the homepage" or "build a card for a project", the Skill ensures the output uses the correct ring-based card styling, pixel-font register badges, and responsive grid without the user naming the design system. ## Quick Start Ask the AI to build or restyle any page or component for joaquinvaldez.me, such as "add a Uses catalog card grid following the site design system".

Frequently Asked Questions about joaquin-valdez-frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new section to the homepage that matches the site design?▼

Wrap the section in the Container primitive with the appropriate size, use the Heading component relying on its level defaults, and apply register codes like `Spec // 02` with the Tailwind uppercase class. Follow the card baseline classes with ring-1 borders instead of drop shadows.

How should I style uppercase text in this design system?▼

Always write standard casing in JSX and apply the Tailwind `uppercase` utility class. Hardcoding all-caps strings causes screen readers to spell words letter-by-letter and couples content to styling.

What component library does this design system use?▼

The system is built on Base UI (@base-ui/react) primitives with shadcn-style components in src/components/ui/, styled with Tailwind CSS. Cards, Buttons, Badges, and Sheets are polymorphic primitives that should be reused rather than hand-rolled.

Does the design system support dark mode and reduced motion?▼

Yes. Surface rings use dark-mode variants like `dark:ring-foreground/15`, and every animation or transform must include `motion-reduce:*` variants such as `motion-reduce:animate-none` to respect user accessibility preferences.

Why do mobile form inputs need a minimum 16px font size?▼

iOS Safari automatically zooms the viewport when an input's computed font-size is below 16px. All inputs and textareas must use `text-base sm:text-sm` so mobile stays at 16px while desktop can shrink to 14px.

Related Skills

Explore More Design & Creative Skills→
openaiopenai
5.3k

geist

Configures Geist Sans, Mono, and Pixel fonts in Next.js applications with Tailwind CSS.

Official
Basic
joaoguirunasjoaoguirunas
3

sites-deployment

Deploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.

Community
Basic
KamalabotKamalabot

blog-post

Generates complete editorial blog post HTML pages with inline CSS and design system tokens.

Community
Intermediate
Festo-WampambaFesto-Wampamba

brandkit

Create premium brand identity boards from a brand concept and name.

Community
Advanced