Surface Humanizer
Edits wording, punctuation, hype, filler, vague attribution, and mechanical sentence patterns.
.agents/skills/humanizer/
Website Creation Workflow
Build with intention.
Keep the reasoning.
A repeatable website workflow: a clear brief, deliberate design, separate copy passes, and a tested preview.
The workflow at a glance
DirectionThe page briefAudience, purpose, design.
WritingThe Humanizer layerWording, structure, voice.
VerificationA tested previewCopy checks and browser QA.
- Copy passes
- 3
- Scanners
- 2
- Browser widths
- 2+
- Deployment
- Explicit
Separate the copy passes
Interactive / 4 states
DRAFT
Meaning first
This workflow turns a project brief into a website preview.
The draft establishes the literal point before editing begins.
Humanizer is a separate writing layer
Connected, not blendedStructural Humanizer
Checks repeated takeaways, uniform section shapes, vague references, cadence, and overlong endings.
.agents/skills/structural-humanizer/
Site voice
Restores product terms, legal caveats, accessible labels, and the page's intended professional register.
rendered page + read aloud
AGENTS.md→two skills→copy gate→browser QA
The scanners are a mechanical floor. They do not verify truth, authorship, accessibility, or publication readiness.
Skills and repositories
Used in this portfolio
DirectionUI UX Pro Maxproduct-specific system
DirectionFrontend Designsubject, layout, signature
MotionGSAP skillsruntime control when justified
Public copyHumanizer Stacksurface + structure
VerificationPlaywrightreal-browser QA
Optional backgroundShaderGradientloads after Play background
Optional controlsLiquid Glass JSrefraction with background enabled
Portfolio rendererReact Three Fibercanvas lifecycle
Optional tools and research credits
Dashboard, shadcn, and interviews are conditional. StoryScope is research attribution. See the source manifest.
Credits: original Humanizer and copy-scanner provenance. Authoring skills do not run in your browser.
From page brief to approval
5 decisionsInspect
Read the current project, page, shared styles, routes, and deployment boundary.
Direct
Choose the audience, page job, tokens, layout, content order, and one subject-specific signature.
Edit
Draft for meaning, then run the surface, structural, and site-voice passes.
Build
Preserve the component stack and add motion only when it explains behavior or state.
Verify
Run the copy gate, exercise every advertised control, and publish only after approval.
Before a website goes live
Release checklistRedesign from an accepted baseline
Review references, save a snapshot, and preserve shared branding, menus, and footers.
Clear layouts and readable controls
Put titles first, connect related content, simplify containers, and check button contrast in every state.
Design that fits the screen
Test short screens, enlarged text, keyboard access, contact, and project links.
Motion and loading
Measure resource use, pause hidden effects, and verify caching on the host.
Legal and privacy facts
Confirm legal identity, applicable disclosures, and actual provider arrangements before publication.
Original visuals and evidence
Review every download. Use original diagrams, not video screenshots; assess claims, not people.
Search and email
Verify canonical routes, metadata, sitemap, and email authentication. OpenSEO is an optional audit.
Working controls and release approval
Test controls, anchors, and downloads. Save a rollback snapshot; deploy only after approval.
Use the website workflow
Start with the README on GitHub.
- Choose the audience, page purpose, and a short copy budget.
- Apply the surface and structural writing passes, then restore the site's voice.
- Run the copy gate and test the page in a browser before publishing.
Release boundary
A clean gate is not approval.
The scanners catch defined patterns and density. Review still owns factual accuracy, accessibility, tone, browser behavior, and the decision to deploy.
