The technical skill stack behind Devcad

This guide explains how the skills used for Devcad fit together as a practical delivery workflow: content discovery, information architecture, visual design, implementation, and publication checks.

The goal is not to use every skill on every task. The goal is to use the smallest reliable workflow that gets a clear idea into a useful page.

1. Establish the content contract

Before writing markup, define the reader, the pain point, the promise, and the boundary of the page. Devcad uses two layers when a topic has mixed audiences:

• Main article: plain-language explanation and practical outcome.
• Technical guide: architecture, implementation, checks, and failure handling.

2. Map the information architecture

The information architecture skill is used to keep the public surface understandable. The current route model separates the primary pages from article detail pages:

/index.html
/blog.html
/about.html
/community.html
/contact.html
/articles/<article-slug>.html

Every new article should have a stable, human-readable slug, a description, tags, a visible link back to the Blog, and at least one related link when a companion guide exists.

3. Apply the design system

The visual design workflow keeps a small set of reusable decisions: paper background, dark ink, acid accent, consistent borders, constrained reading width, and responsive spacing. Design tokens make the next page faster without making it look unrelated.

4. Build for the rendered page

Web design engineering covers the implementation details that source markup alone cannot guarantee:

• Use semantic headings and descriptive metadata.
• Keep horizontal mobile gutters visible at narrow widths.
• Use local SVG assets with descriptive alternative text.
• Keep touch targets and navigation usable on mobile.
• Check both root-level routes and legacy /pages/ aliases.

5. Use diagrams for one question at a time

The architecture diagram skill is most useful when the graphic explains a relationship quickly. For the Devcad workflow, the diagram should answer: where does the assistant fit, where does the email system fit, and where does human approval remain?

6. Verify before publication

Local verification checks that files exist, links resolve, metadata is present, and the page contains the intended visual markers. Public verification is separate: request the exact live URL, confirm a successful response, check the title, and look for distinctive new content.

Local:  article exists + links resolve + mobile CSS preserved
Live:   URL returns 200 + expected title + new content visible

7. Keep the trust boundary explicit

AI can draft, classify, summarize, compare, and prepare changes. Consequential actions should remain visible and reviewable. Public articles should never include credentials, private connection details, personal mailbox information, or internal deployment secrets.

Suggested rollout order

1. Write and review the reader-facing article.
2. Write the technical companion only where detail is useful.
3. Build the page and its visual anchors.
4. Check links, metadata, and narrow-screen layout.
5. Publish both the article and its companion.
6. Read both public URLs back and verify the new markers.

Sources

[1] Web design engineer skill
[2] Beautiful article skill
[3] Information architecture skill
[4] Architecture diagram skill
[5] Design MD skill