skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

editorial-tech

Applies an editorial-tech design system combining asymmetrical grids, cinematic media bands, and mono utility labels to web interfaces.

5.7k|685|Updated Feb 3, 2026
Search Tags:#HTML#Design system#editorial design#ui style#Typography#Web design#Landing Page
One-click install
npx skills add https://github.com/MengTo/Skills --skill editorial-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editorial-tech
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/editorial-tech
Command: npx skills add https://github.com/MengTo/Skills --skill editorial-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Designing premium web pages that feel both editorial and technically precise is hard to do consistently; this Skill provides a complete style direction so agents produce cohesive layouts instead of generic centered SaaS templates.

Core Features & Use Cases

  • Full design-system direction: Covers layout, typography, surfaces, media treatment, navigation, and motion with concrete rules for asymmetrical grids, cinematic media bands, and restrained accent color.
  • Implementation guidance and patterns: Recommends multi-column offset layouts, mono utility labels, thin-framed panels, masked text reveals, and calm parallax, plus explicit anti-patterns to avoid.
  • Reference demo included: Ships a sandboxed Neuform demo (NEUS | Enterprise Brand Architecture) with prompts to recreate or remix it as a responsive standalone HTML page.
  • Use Case: Ask your agent to build a landing page for a developer tool brand; the Skill steers it toward an editorial spread with technical markers, dark premium surfaces, and a single accent color rather than stock gradient cards.

Quick Start

Use the editorial-tech skill to create a responsive standalone HTML landing page with asymmetrical editorial composition, cinematic media bands, and restrained accent color.

Frequently Asked Questions about editorial-tech

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

FAQPage Schema
How do I apply an editorial-tech design style to a landing page?▼

Load the SKILL.md as context and ask the agent to build the page using its direction: asymmetrical multi-column grids, cinematic media bands, mono utility labels, thin divider lines, and one restrained accent color across layout, typography, and motion.

What is the difference between editorial-tech and generic SaaS landing page design?▼

Editorial-tech uses offset asymmetrical composition, narrative media bands, and technical markers like mono labels and grid traces, while generic SaaS design relies on centered hero blocks, interchangeable cards, and stock gradients, which this Skill explicitly avoids.

Can I recreate the included NEUS demo as a standalone HTML page?▼

Yes. The demo/PROMPT.md file provides minimal, recreate, and remix prompts that treat demo/index.html as the visual and interaction reference, targeting a full responsive index.html with assets placed in demo/assets/.

What libraries does the editorial-tech demo page use?▼

The bundled demo uses Tailwind CSS, GSAP with ScrollTrigger, Three.js, and Iconify, loaded as pinned runtime scripts, plus Inter and Roboto Mono from Google Fonts. These are demo dependencies, not requirements of the Skill itself.

When should I not use the editorial-tech style?▼

Avoid it for plain corporate SaaS pages, pure magazine minimalism, or designs needing bright multi-color palettes and playful motion. The style sits between editorial narrative and technical precision and breaks down if the accent color is overused.

Related Skills

Explore More Design & Creative Skills→
lc0rplc0rp

ios-simulator-screenshot

Capture and stitch full-page screenshots from a booted iOS Simulator.

Community
Advanced
ikastnerikastner

animation-implementation

Provide reusable React animation components with ScrollReveal, Lenis, and GSAP/Framer Motion patterns.

Community
Advanced
arthtyagiarthtyagi
1

frontend-design

Create distinctive frontend interfaces with polished layout, typography, and motion.

Community
Advanced
hackeshackeshackeshackes
6

ppt-generation

Generate PowerPoint presentations with AI-created slide images and consistent styles.

Community
Intermediate