skills.rest
in-parallel-oy
in-parallel-oyOFFICIAL
Explore all skills by this author →
GitHub

website-design

Maintain and extend the In Parallel marketing website with Astro 5, Tailwind CSS 4, and Sanity CMS.

Updated Aug 23, 2026
Search Tags:#design system#ui/ux#frontend development#website#tailwind#astro
One-click install
npx skills add https://github.com/in-parallel-oy/narayan-web --skill website-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-design
Source: https://github.com/in-parallel-oy/narayan-web/tree/main/.claude/skills/website-design
Command: npx skills add https://github.com/in-parallel-oy/narayan-web --skill website-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all updates and additions to the In Parallel marketing website maintain design consistency and adhere to the established design system.

Core Features & Use Cases

  • Design System Adherence: Enforces the use of predefined design tokens for colors, typography, spacing, and motion.
  • Component Integration: Guides the creation and modification of new sections and pages using existing patterns and templates.
  • Visual Verification: Facilitates comparison against the live site using Playwright for accurate visual alignment.
  • Use Case: When adding a new testimonial section to the homepage, this Skill ensures the section uses the correct background color, typography, card styling, and scroll animations as defined in the design system.

Quick Start

Use the website-design skill to add a new section to the homepage.

Frequently Asked Questions about website-design

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

FAQPage Schema
How do I maintain design consistency when extending an Astro website with Tailwind CSS?▼

To maintain website design consistency, enforce predefined design tokens for colors, typography, and spacing when adding new sections. This ensures component integration matches established page templates and design system patterns.

What is the best way to add a new section to a website homepage without breaking the design system?▼

The best way to add a homepage section is by using existing component patterns and templates. This enforces design system adherence by applying predefined design tokens for background colors, typography, card styling, and scroll animations.

How do I verify visual alignment of new website sections against a live site?▼

Visual verification against a live site is facilitated using Playwright. This enables accurate visual comparison to ensure newly added sections and modified pages align correctly with the existing website design.

Does this website design approach work with Sanity CMS and Tailwind CSS 4?▼

Yes, this approach maintains and extends marketing websites using Astro 5, Tailwind CSS 4, and Sanity CMS. It leverages predefined design tokens and component patterns to ensure all updates adhere to the design system.

Why do my new website pages look visually inconsistent with the rest of the site?▼

Visual inconsistency occurs when new pages bypass predefined design tokens for motion, spacing, and typography. Enforcing design system adherence through existing component patterns and templates ensures visual alignment across the website.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

tailwind-core-architecture

Explain Tailwind CSS utility-first architecture, content scanning, layers, and responsive design.

Official
Advanced
jvm-skillsjvm-skills
135

ui-review

Runs Playwright tests and captures screenshots to validate visual UI correctness.

Official
Intermediate
ProfPowellProfPowell
4

sanity-cms

Integrate Sanity CMS with GROQ queries for Astro and 11ty.

Community
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate