skills.rest
thompson0012
thompson0012COMMUNITY
Explore all skills by this author →
WebsiteGitHub

informational

Create content-first websites with semantic HTML, design tokens, and responsive layouts.

28|2|Updated Feb 5, 2026
Search Tags:#typography#accessibility#layout#content-first#website-design#informational
One-click install
npx skills add https://github.com/thompson0012/agents-stack --skill informational
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: informational
Source: https://github.com/thompson0012/agents-stack/tree/main/skills-optional/website-building/informational
Command: npx skills add https://github.com/thompson0012/agents-stack --skill informational

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the challenge of creating content-first websites that are accessible and maintainable.

Core Features & Use Cases

  • Design-token guidance: Provides a foundation for consistent typography, spacing, and color systems.
  • Layout & editorial patterns: Recommends multi-column grids, magazine-style indexes, and responsive breakpoints for editorial sites.
  • Accessibility & SEO basics: Emphasizes semantic HTML, alt text, proper heading structure, and meta descriptions.
  • Use Case: Ideal for personal portfolios, editorial blogs, landing pages, and small business sites seeking a polished, scalable presence.

Quick Start

Begin by loading the Informational guidance and shared typography and layout references to start designing your content-first site.

Frequently Asked Questions about informational

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

FAQPage Schema
How do I design a content-first website layout that is accessible?▼

Create an accessible content-first website by applying design-token systems for consistent typography and spacing, semantic HTML structure, responsive multi-column editorial grids, and standard accessibility practices.

What is a design-token system for website typography and layout?▼

A design-token system provides a foundational framework for consistent typography, spacing, and color across content-first websites, ensuring scalable and maintainable design patterns for editorial blogs and portfolios.

Can I use this approach for small business sites and landing pages?▼

Yes, this approach suits personal portfolios, editorial blogs, landing pages, and small business sites by providing cohesive typography, responsive breakpoints, and scalable design-token guidance for a polished presence.

How do I structure semantic HTML for an editorial blog with responsive layouts?▼

Structure semantic HTML by applying proper heading structures, alt text, and meta descriptions while utilizing multi-column grids and responsive breakpoints to build accessible and SEO-friendly editorial layouts.

What's the best way to maintain consistent spacing and color across a portfolio site?▼

Maintain consistent spacing and color across a portfolio site by implementing a foundational design-token system, which ensures cohesive typography and scalable visual elements throughout the content-first design.

Related Skills

Explore More Design & Creative Skills→
KRISHNA0RKRISHNA0R
25

ui-setup

Automate StyleSeed UI project setup with token and scaffold generation.

Community
Intermediate
suhwansuhwan

phase-7-seo-security

Enforce SEO tagging, semantic HTML, and security controls across web application development.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-ui-widgets

Provide a structured library of Flutter UI widgets for consistent layouts.

Community
Intermediate