skills.rest
micio86dev
micio86devCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-designer-moderno

Craft SSR-enabled QwikJS and Tailwind web interfaces with accessible CSS architecture.

Updated Aug 27, 2026
Search Tags:#design#accessibility#Tailwind#SSR#web-design#Qwik
One-click install
npx skills add https://github.com/micio86dev/itjobhub-antigravity-config --skill web-designer-moderno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-designer-moderno
Source: https://github.com/micio86dev/itjobhub-antigravity-config/tree/main/.agent/skills/web-designer
Command: npx skills add https://github.com/micio86dev/itjobhub-antigravity-config --skill web-designer-moderno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The modern web design skill enables agents to craft fast, accessible, SSR-ready interfaces using QwikJS and Tailwind CSS for high-performance, inclusive web apps.

Core Features & Use Cases

  • Hybrid CSS Rule to enforce a clean separation between utility-driven styling and custom CSS variables, preventing PostCSS build issues.
  • SSR-First Components designed for native QwikJS SSR with optimal serialized state and zero-redirect warmups.
  • Accessibility-First guidance to meet WCAG AA/AAA, including ARIA labels, semantic HTML, and keyboard focus management.
  • Theme Persistence using cookies to maintain dark/light mode across sessions.

Quick Start

Create a responsive header component in Qwik using Tailwind utilities, apply the Hybrid CSS Rule, ensure dark/light theme persistence via a cookie, and validate accessibility with ARIA attributes. Then run bun run lint, bun run build, and bun run test to verify green results.

Frequently Asked Questions about web-designer-moderno

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

FAQPage Schema
How do I build accessible SSR components with Qwik and Tailwind?▼

To build accessible SSR components with Qwik and Tailwind, you use SSR-first patterns with semantic HTML, ARIA labels, and keyboard focus management to meet WCAG AA/AAA standards. This approach ensures inclusive, high-performance web apps.

Why does Tailwind cause PostCSS build issues in my Qwik project?▼

Tailwind causes PostCSS build issues when utility classes and custom CSS variables are poorly mixed. Applying a Hybrid CSS Rule enforces a clean separation between utility-driven styling and custom CSS variables, preventing these build conflicts.

How do I persist dark and light mode themes in a Qwik SSR application?▼

You persist dark and light mode themes in a Qwik SSR application by using cookies. This method maintains the user's selected theme preference across different sessions without requiring client-side hydration.

What is the best way to structure production-grade Qwik components for SSR?▼

The best way to structure production-grade Qwik components for SSR is to design them for native QwikJS SSR with optimal serialized state and zero-redirect warmups, ensuring fast performance and maintainable code architecture.

Do I need to know Qwik and Tailwind to use this modern web design approach?▼

Yes, you need prior knowledge of Tailwind, Qwik, and a strong commitment to accessible, maintainable code. This approach targets design professionals building production-grade components and assumes familiarity with these specific technologies.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
h-4vokh-4vok

repo-validate

Run lint, typecheck, test, smoke, and build checks across a repository and emit a pass/fail report.

Community
Intermediate
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
Kinfe123Kinfe123
35

hydration-patterns

Explain hydration strategies for server-rendered HTML and client interactivity.

Community
Advanced